Webpack基本配置介绍

编程入门行业动态更新时间:2024-10-25 14:24:12

Webpack<a href=https://www.elefans.com/category/jswz/34/1746417.html style= 基本配置介绍"/>

Webpack基本配置介绍

webpack基本配置的介绍

webpack基本配置的介绍
- 准备步骤
- entry和output配置
  - entry配置
  - output的配置
- plugin插件
  - 处理html的插件
    - html-webpack-plugin
- loader加载器
  - 使用loader的三种方式
  - babel
    - 使用node的path方法
  - 处理css文件的loader
    - css-loader和style-loader
    - postcss-loader
    - less-loader
- webpack处理模板文件
  - webpack处理html文件
  - webpack处理ejs或tpl文件
- webpack处理图片或者其他文件
  - 图片文件的处理
    - 在css中使用相对路径的图片生成背景
    - 在html中引入相对路径图片
    - 在模板中引入图片
    - 改变图片打包后的输出地址
  - 处理其他文件
    - 压缩文件

准备步骤

初始化

//新建文件夹，文件夹内执行命令
npm init
//局部下载webpack
npm install webpack  --save-dev

建立相关的文件夹，如src，img，本例中：dist存放打包后文件，src下分为script和style分别存放js文件和css文件；
创建配置文件
- 根目录下创建webpack.config.js

//使用commonjs引入
module.exports ={entry: './src/script/main.js',output: {//webpack3要求绝对路径path: __dirname + '/dist/js',filename: 'bundle.js'}
}

修改package.json里的

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
}

运行webpack，成功打包
webpack.config.js的作用
- 可以不命名为webpack.config.js，但是webpack执行时是找不到配置文件的，所以如果命名为webpack.dev.config.js，那么要有一个配置webpack --config webpack.dev.config.js，执行npm run webpack才会成功。

entry和output配置

entry配置

entry是指需要打包的文件；
entry有几种使用方法：
- 字符串

entry:__dirname+'/src/script/main.js'
//对应
output:{path:__dirname+'/dist/js',filename:'bundle.js'
}

数组

entry:[__dirname+'/src/script/main.js',__dirname+'/src/script/a.js'
]
//对应
output:{path:__dirname+'/dist/js',filename:'bundle.js'
}

对象

entry:{main:__dirname+'/src/script/main.js',a:__dirname+'/src/script/a.js'}
//对应
output:{path:__dirname+'/dist/js',filename:'[name]-[hash].js'
}
//or 
output:{path:__dirname+'/dist/js',filename:'[name]-[chunkhash].js'}

output的配置

output是指打包生成的文件
entry中输入多个chunk时，为确保文件名唯一避免相互覆盖使用占位符命名filename；
三种占位符
- [name]是chunk的name；
- [hash]是本次打包的hash值，hash值相同；
- [chunkhash]是每个chunk的hash值，不同文件同次打包不相同，保证文件的唯一性，只有改变文件中的内容时hash才变化，未做改变的文件hash值不变；
- [ext]是源文件的后缀名占位符

plugin插件

处理html的插件

html-webpack-plugin

使用html-webpack-plugin插件来解决，webpack.config.js的出口文件名用占位符自动生成的js打包文件名（[chunkhash]）每一次都不一样的问题；

var htmlWebpackPlugin = require('html-webpack-plugin')
//modules.exprots中的添加插件配置
plugins: [//html中引入script，如果是hash或者chunkhash生成的js，则src每次都要修改，避免修改的方法就是使用webpack的插件new htmlWebpackPlugin()
]