Webpack安装和使用

安装

1
2
3
4

npm install -g webpack
npm install -g webpack-cli
# 查看版本
webpack -v

打包JS

1

webpack <js入口文件> -o <js输出文件>

举例：

• bar.js

  1 2 3

  module.exports = function () { console.log('i am bar...') }

• main.js

  1 2	var bar = require('./bar') bar()

  1	webpack main.js -o bundle.js

webpack.conf.js

通过配置文件简化打包，再次打包时只用输入webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// path模块
const path = require('path')
module.exports = {
    // 只能是none，development，production
    // none，输出文件不压缩
    // development，开发环境，输出文件不压缩
    // production,生产环境， 输出文件压缩
    mode:'none',
    // 入口js
    entry:'./src/main.js',
    // 输出js位置
    output:{
        path:path.join(__dirname, './dist/'),
        filename:'bundle.js'
    }
}

• 卸载webpack

  1 2 3

  # 官方建议局部安装，因为当项目迁移都其他服务器内，如果依赖全局安装，可能导致不兼容 npm uninstall -g webpack npm uninstall -g webpack-cli

• 局部安装

  1 2	npm i -D webpack npm i -D webpack-cli

  自定义局部命令

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  cd /path/projeth cat package.js { "name": "webpack-demo02", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "show":"webpack -v", # 这里指定命令 "build":"webpack", # 构建 "watch":"webpack --watch"# webpack 实时监测模式 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.41.5", "webpack-cli": "^3.3.10" } } # 调用方法 npm run build

• CSS打包

  • 安装转换器

    1	npm i -D style-loader css-loader

  • 配置webpack规则

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

    // path模块 const path = require('path') module.exports = { // 只能是none，development，production // none，输出文件不压缩 // development，开发环境，输出文件不压缩 // production,生产环境， 输出文件压缩 mode:'none', // 入口js entry:'./src/main.js', // 输出js位置 output:{ path:path.join(__dirname, './dist/'), filename:'bundle.js' }, module:{ rules:[// 配置转规则 { test: /\.css$/,//正则表达式，匹配css文件，注意不能有单引号 use:[// 根据外国人的习惯顺序 'style-loader',//js识别css 'css-loader'//css转换js ] } ] } }

    style.css

    1 2 3

    body{ background: yellow; }

    main.js

    1	import './style.css'

  • 打包命令

    1	npm run build

• 图片打包

  • 安装file-loader

    1	npm i -D file-loader

    • 配置webpack规则

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

      // path模块 const path = require('path') module.exports = { // 只能是none，development，production // none，输出文件不压缩 // development，开发环境，输出文件不压缩 // production,生产环境， 输出文件压缩 mode:'none', // 入口js entry:'./src/main.js', // 输出js位置 output:{ path:path.join(__dirname, './dist/'), filename:'bundle.js' }, module:{ rules:[// 配置转规则 { test: /\.css$/,//正则表达式，匹配css文件，注意不能有单引号 use:[// 根据外国人的习惯顺序 'style-loader',//js识别css 'css-loader'//css转换js ] }, { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] } ] } }

      style.css

      1 2 3 4

      body{ background: yellow; background-image: url("Grafana.png"); }

      main.js

      1	import './style.css'

  • 打包命令

    1 2 3 4

    npm run build # 因为文件打包之后只有相对路径，所有需要将index移动到和dist目录下 cp index.html dist/ `

• html-webpack-plugin

  1	npm install --save-dev html-webpack-plugin

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

  webpack.config.js // path模块 const path = require('path') // 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // 只能是none，development，production // none，输出文件不压缩 // development，开发环境，输出文件不压缩 // production,生产环境， 输出文件压缩 mode:'none', // 入口js entry:'./src/main.js', // 输出js位置 output:{ path:path.join(__dirname, './dist/'), filename:'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ // 指定要打包的模板页 // 就会即将index.html打包到与dist.js相同的目录 template: './index.html' }) ], module:{ rules:[// 配置转规则 { test: /\.css$/,//正则表达式，匹配css文件，注意不能有单引号 use:[// 根据外国人的习惯顺序 'style-loader',//js识别css 'css-loader'//css转换js ] }, { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] } ] } }