基本配置介绍"/>
Webpack基本配置介绍
webpack基本配置的介绍
- webpack基本配置的介绍
- 准备步骤
- entry和output配置
- entry配置
- output的配置
- plugin插件
- 处理html的插件
- html-webpack-plugin
- 处理html的插件
- 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才会成功。
- 可以不命名为webpack.config.js,但是webpack执行时是找不到配置文件的,所以如果命名为webpack.dev.config.js,那么要有一个配置
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()
]
- 此时可以将html中引入的js文件自动进行更改,而不用每次生成都要修改生成的hash值;
<script
更多推荐
Webpack基本配置介绍
发布评论