用webpack打包vue项目(单页面应用)的webpack.config设置详解

场景:
vue项目(单页面应用)已完成;
用webpack打包vue项目准备上线;
在项目根目录(手写)创建打包配置文件webpack.config.prod.js,框架及内容如下。

//引包:打包成页面用到的webpack+html const webpack = require("webpack"); //htmlWebpackPlugin它的作用是根据chunk代码块生成文档 const htmlWebpackPlugin = require("html-webpack-plugin"); //引包:output需要用到字符串拼接 const path = require("path"); //引包:删除(旧的打包文件)dist目录 var cleanWebpackPlugin = require("clean-webpack-plugin"); //引包:抽离css的插件 const ExtractTextPlugin = require("extract-text-webpack-plugin")module.exports = { entry:{ //(按实际写)这里放分解抽包后的入口文件-分解后的main.js // 在这里分了多少个口,main.js及其引包的js库与插件就会被分解抽包成多少个 // 最后的 bundle:"./src/main.js"为拆解了各包后剩下的部分 // 【格式】最终js文件名: ['vue包名1', "vue包名2"] }, output:{//(固定写法)为分解抽包的js文件指定路径 path: path.resolve(__dirname, 'dist'),//需拼接路径所以前面得引包path filename: 'js/[name].js' }, module:{//(按实际写)加载器:文件loader,处理不同的静态资源 // 【格式】{ test:/\.后缀名$/,use:['xx-loader'] }, // 【格式】{ test:/\.(后缀|后缀)$/,use:[ { loader:'xx-loader', opinions:{}]}, // 【格式】{ test:/\.(后缀|后缀)$/,use:插件.调用({ fallback:"xx-loader", use:[{ loader:'xx-loader', opinions:{}}]}), }, resolve:{ //(固定写法)可以不加后缀, 直接使用 import xx from 'xx' 的语法 extensions: ['.vue', '.js', '.css'] }, plugins:[ //(按实际写)生成html前,打包专用组件的各种优化操作,如删旧dist、压缩、抽出包等// (固定写法)删除旧的dist打包文件夹 new CleanWebpackPlugin('dist'), //其实要删除文件的路径可以是多个,视具体情况而定//(固定写法) 配置html new htmlWebpackPlugin({ template: './template.html',//从这儿出发 filename: 'index.html',//导成这个 minify:{//(固定写法)html的压缩配置 removeComments: true,//移除注释 minifyJS: true,//压缩js minifyCSS: true,//压缩css collapseWhitespace: true,//去除空格 // collapseWhitespace: true, //(段子黄未用)移除空白 // removeAttributeQuotes: true//(段子黄未用)移除属性中的双引号 } }),new webpack.ProvidePlugin({//(固定写法)全局导入jquery,将jquery挂载到windows上 // 用于有些库,比如jquery、bootstrap,打包不会出错,但是放在浏览器下就出问题,原因是bootstrap在初始化的时候要传入全局的jQuery变量,webpack中各模块都是独立的,jquery也是,jQuery无法赋值到window上,导致报错,这时候,这个插件就派上用场了,将jquery模块输出到全局的jQuery变量上。让bootstrap不再报错(没用bootstrap用了jQuery的话也要全局导入jQuery) $: "jquery", jQuery: "jquery" }),//(固定写法)设置当前环境为生产环境 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }),//(固定写法)使用UglifyJs对js代码进行压缩 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, //去掉警告 drop_debugger: true, //去掉调试器和调试语句 drop_console: true //去除console.log }, comments: false //去掉版权信息等注释约1k,也可以保留 }),//(按实际写)抽离第三方包,这里不要写bundle.js new webpack.optimize.CommonsChunkPlugin({ //(按实际写)抽离的第三方包 name: ["quanjiatong", "vue-lazyload", "v-distpicker", "vue-moment", "jquery", "axios"], // 对应 entry 中拆解打包后的js文件名,除了bundle以外按顺序倒着写 // filename: "vendor.js" //这是干嘛的?乐东看到了请告诉我 // (给 chunk 一个不同的名字)// (固定写法)(随着 entry chunk 越来越多,这个配置保证没其它的模块会打包进 vendor chunk) minChunks: Infinity, }),// (固定写法)通过插件抽离 css new ExtractTextPlugin("css/styles.css") //参数:传入路径,表示将抽离的css文件生成到哪个目录中 ] }

后续更新...
还缺少npm三个包的安装、.Babel文件es6转es5的配置、打包完成后的(字体图标等的)路径校准等.
  • package.json的scripts中增配置
    "build":"webpack --progress --config webpack.config.prod.js"

  • 打包命令行 npm run build
【用webpack打包vue项目(单页面应用)的webpack.config设置详解】2018.3.26

    推荐阅读