什么是webpack
Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
为什么使用webpack
webpack会把各种资源(js,png,css,less,等等)都作为模块来使用和处理,最后转化成一系列的静态资源。
webpack提供了一系列的模块加载器(loader)来编译这些模块。比如处理less文件,webpack提供了less-loader将less文件处理成css,然后再通过css-loader加载成css模块,最后由style-loader加载器对其做最后的处理,等等。当然,你还可以定制自己的加载器处理自己的特需需求
安装webpack
全局安装:
$ npm install webpack -g
本地安装(直接写入项目 package.json 包):
npm install webpack --save-dev
webpack入口(Entry)
webpack 将创建所有应用程序的依赖关系图表(dependency graph)。图表的起点被称之为入口起点(entry point)。入口起点告诉 webpack 从哪里开始,并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为是根上下文(contextual root)或 app 第一个启动文件。
在 webpack 中,我们使用 webpack 配置对象(webpack configuration object) 中的 entry 属性来定义入口。
1.单个文件入口
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
2.多个页面
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
webpack出口(Output)
将所有的资源(assets)归拢在一起后,我们还需要告诉 webpack 在哪里打包我们的应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)。
1.单入口单出口
{
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: __dirname + '/build'
}
}
2.多入口多文件
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/build'
}
}
webpack加载器(Loaders)
loader 是对应用程序中资源文件进行转换。它们是(运行在 Node.js 中的)函数,可以将资源文件作为参数的来源,然后返回新的资源文件。
使用 loader 告诉 webpack 加载 CSS 文件,或者把 *.vue 文件转换成 webpack 包,和整个打包过程融合起来,安装相对应的 loader
npm install --save-dev css-loader
npm install --save-dev vue-loader
module-rules 允许你在 webpack 配置中指定几个 loader。
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader'
}],
exclude: /node_modules/
},
{
test: /\.vue(\?[^?]+)?$/,//解析vue文件
use: [{
loader: 'vue-loader' //用vue-loader去解析
}]
}
]
}
webpack插件(Plugins)
插件目的在于解决 loader 无法实现的其他事
例如使用 UglifyJsPlugin 进行 JS 文件压缩
const webpack = require('webpack');
module.exports = {
/*...*/
plugins:[
new webpack.optimize.UglifyJsPlugin({
sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
})
]
};
webpack教程链接
手册网(2.2)教程:http://www.shouce.ren/api/view/a/13313
webpack官方教程:https://doc.webpack-china.org/guides/