webpack是前端最流行的打包工具之一，我们应该当对其有所了解；
来看一下webpack的配置文件：module.exports = { //暴露出去的对象 context: path.resolve(__dirname, '../'), 上下文 entry: { // 打包的文件入口 app: './src/main.js' // String Object Array }, output: { // 打包文件的输出 path: config.build.assetsRoot, //输出路径 filename: '[name].js', //输出文件的命名根据entry里的app命令最终是app.js publicPath: process.env.NODE_ENV === 'production' //请求资源的静态绝对路径 ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { //模块的解析 代码中引入模块的相关解析 extensions: ['.js', '.vue', '.json'], //import模块文件自动补全文件路径 alias: { //别名 require路径中可以使用别名缩短长度 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, module: { //模块 处理各种资源文件 rules: [ //根据不同文件的后缀用不同的loader去处理 // ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, //正则匹配.vue结尾的文件 loader: 'vue-loader', //使用vue-loader处理 options: vueLoaderConfig //loader的可选项 }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } plugins: [ // 插件列表 // ... ],}复制代码 webpack中的核心概念总结起来就是Entry、Output、Loaders、Plugins、Chunk。
Entry：指定webpack构建模块的入口文件，并且构建直接或者间接引入的模块。 Output：指定webpack输出文件的命名以及路径。 Loaders：处理各种资源文件如js、sass、less，将这些文件处理成webpack能够处理的模块。 Plugins：对文件的压缩、打包、甚至重新定义环境中的变量。 Chunk：其实就是将一些代码打包成一个单独的chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能。