关于webpack
关于webpack，首先参考的是webpack官方中文文档；
介绍了四大属性组成部分：
1.entry -- 入口；
2.output -- 出口；
3.loader；-- 处理非js文件；
4.p'lugins -- 插件；
webpack在处理应用程序时，会递归的构建一个依赖关系图。
1.入口：规定依赖关系图的开始；
一个入口文件： 只有一个起点的单页面应用
module.exports =entry: {
main: './path/to/my/entry/file.js'；
vendors: './src/vendors.js' //第三方库入口
}
简写模式：
module.exports = {entry: './path/to/my/entry/file.js'}
多个入口文件： 使用数组；多页面应用；
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
进入入口起点后，webpack就能找到哪些模块或库是入口起点的依赖；每个依赖项是随即被处理的。
2.出口：规定所创建的bundles在哪里输出，以及如何命名这些文件；
选项可以控制webpack如何将编译文件写入硬盘；【即便有多个入口文件，只设置一个出口配置】
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
} //将一个单独的my-first-webpack.bundle.js文件输出到硬盘 './dist/my-first-webpack.bundle.js'路径下；
//或
output: {
filename: '[name].[chunkhash:5].js', // 输出文件名
path: path.resolve(__dirname, 'dist')
}, //将多个文件输出到./dist/ 下；
3.loader：处理非js类型文件，webpack只能理解js。loader可以转换其他类型的文件为webpack可以理解的文件类型；
loader可以import 引入任何类型的文件；
module: {
rules: [
{ test: /.txt/,loader: 'vue-loader' },
]
}
};
在webpack中配置后，要用命令安装好相应的loader；
npm install --save-dev css-loader
npm install --save-dev ts-loader
在应用程序中有三处使用loader方式；
推荐使用在webpack.config.js中配置，如上；
4.plugins：插件 用来处理范围更广的任务。用来处理loader无法首先的其他事；包括代码优化，打包，转换开发环境等；
直接查阅插件列表；
插件有apply属性，被compiler调用。compiler在整个生命周期都可以访问；
由于plugins中携带参数/选项。需要向webpack属性中传入new实例；
推荐使用配置方法；如下；
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log("webpack 构建过程开始！");
});
}
} //compiler.hooks中的tap方法的第一个参数应该是驼峰式的插件名；建议使用常量，以便被所有hook使用；
5.模式：mode属性 规定：开发环境；告知相应模式的内置优化；
mode:'development/production' //设置开发或者生产模式，
设置后会将process.env.NODE_ENV的值设置为对应的 development/production；分别启用不同的插件；
module.exports = {
- mode: 'development'
- plugins: [
- new webpack.NamedModulesPlugin(),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}
module.exports = {
- mode: 'production',
- plugins: [
- new UglifyJsPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
- ]
}
模块解析
用于找到模块的绝对路径。一个模块（可以是应用程序代码或是第三方库）可以作为另一个模块的依赖，最后被后者引用；
import foo from 'path/to/module'
// 或者
require('path/to/module')