介绍:
webpack是收把项目当作一个整体,通过一个给定的的主文件, webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包成一个或多个浏览器可识别的js文件
1.安装
npm install webpack webpack-dev-server --save-dev
webpack是模块打包机,webpack-dev-server用来创建本地服务器,监听你的代码修改,并自动刷新修改后的结果,查看webpack的配置文件devServer
2.entry: 用来写入口文件,它将是整个依赖关系的根
3.output: 即使入口文件有多个,但是只有一个输出配置
4.loader使用:.babelrc文件
负责的是处理源文件的如css、jsx,一次处理一个文件,在webpack.config.js里边单独用module进行配置
常见loader:babel-loader 转化js css-loader,style-loader解析css less-loader解析less file-loader:
5.Plugins使用:HtmlWebpackPlugin,HotModuleReplacementPlugin
webpack.config.js的配置如下:
var baseConfig = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].js',//name为entry的key
path: path.resolve('./build')
},
devServer: {
contentBase: './src',// 本地服务器所加载的页面所在的目录
port, // 监听端口,默认8080
historyApiFallback: true, // 不跳转
inline: true // 实时刷新
},
module: {
rules: [
{
test: /\.less$/,//匹配所处理文件的扩展名的正则表达式(必须)
// use: [
// {loader: 'style-loader'},
// {loader: 'css-loader'},
// {loader: 'less-loader'}
// ],
use: ExtractTextPlugin.extract[
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'less-loader'}
],
exclude: /node_modules/ //include/exclude手动添加处理的文件,屏蔽不需要处理的文件(可选)
}]
},
plugins: [
new HTMLWebpackPlugin(),//成一个自动引用你打包后的js文件的新index.html
new webpack.HotModuleReplacementPlugin(),//它允许你在修改组件代码时,自动刷新实时预览修改后的结果
new ExtractTextPlugin('main.css'),//为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。如果不使用就会把css打包在js文件里
// 优化代码插件
new webpack.optimize.OccurenceOrderPlugin(),//为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多 的模块,然后为他们分配最小的ID
new webpack.optimize.UglifyJsPlugin()//压缩代码
]
}