From 066917e8428f0b3efabe9c6f3d522bbd279ed427 Mon Sep 17 00:00:00 2001 From: xsf <416175716@qq.com> Date: Fri, 19 Aug 2016 11:38:07 +0800 Subject: [PATCH] change webpack --- package.json | 5 +- webpack.config.js | 116 +++++++++++++++++++++------------------------- 2 files changed, 57 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index e030e80..4d42449 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "1.0.0", "main": "index.js", "dependencies": { - "extract-text-webpack-plugin": "^0.8.2" + "extract-text-webpack-plugin": "^0.8.2", + "open-browser-webpack-plugin": "^0.0.2" }, "devDependencies": { "babel-core": "^6.3.17", @@ -43,4 +44,4 @@ }, "author": "", "license": "ISC" -} +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 52730d8..1fc87e5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,11 +1,12 @@ -//先清空 n-build 文件夹下的文件 -//在nodejs中，可以通过fs（file system）模块进行文件的I/O操作(fs: http://www.2cto.com/kf/201411/351586.html)。 +/* + 先清空 n-build 文件夹下的文件 + 在nodejs中，可以通过fs（file system）模块进行文件的I/O操作(fs: http://www.2cto.com/kf/201411/351586.html)。 +*/ var fs = require('fs'), buildPath='./build/'; var folder_exists = fs.existsSync(buildPath); -if(folder_exists == true) -{ +if(folder_exists == true) { var dirList = fs.readdirSync(buildPath); dirList.forEach(function(fileName) { @@ -15,9 +16,11 @@ if(folder_exists == true) console.log("clearing " + buildPath); }; -//readfile方法: 进行文件数据的读取 -//writeFile方法: 将数据写入文件到某个文件夹下 -//先把index.html里面关于style和js的hash值都删除掉，避免在使用 npm run dev 的时候，路径还是压缩后的路径 +/* + readfile方法: 进行文件数据的读取 + writeFile方法: 将数据写入文件到某个文件夹下 + 先把index.html里面关于style和js的hash值都删除掉，避免在使用 npm run dev 的时候，路径还是压缩后的路径 +*/ fs.readFile("index.html",'utf-8',function(err,data){ if(err){ console.log("error"); @@ -27,79 +30,68 @@ fs.readFile("index.html",'utf-8',function(err,data){ fs.writeFileSync('index.html', devhtml); } }); - var webpack = require('webpack'); - //var vue = require("vue-loader"); - - -//混淆压缩 -var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin; - -//检测重用模块 -var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; - -//独立样式文件 -var ExtractTextPlugin = require("extract-text-webpack-plugin"); - - - -// 在命令行 输入 “PRODUCTION=1 webpack --progress” 就会打包压缩，并且注入md5戳 到 index.html里面 -var production = process.env.PRODUCTION; - +var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//混淆压缩 +var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;//检测重用模块 +var ExtractTextPlugin = require("extract-text-webpack-plugin");//独立样式文件 +var production = process.env.PRODUCTION;//在命令行 输入 “PRODUCTION=1 webpack --progress” 就会打包压缩，并且注入md5戳 到 index.html里面 var plugins = [ - //会将所有的样式文件打包成一个单独的style.css - new ExtractTextPlugin( production ? "style.[hash].css" : "style.css" , { - disable: false, - allChunks: true //所有独立样式打包成一个css文件 - }), - //new ExtractTextPlugin("[name].css" ) - //自动分析重用的模块并且打包成单独的文件 - new CommonsChunkPlugin(production ? "vendor.[hash].js" : "vendor.js" ), - function(){ - return this.plugin('done', function(stats) { - var content; - //这里可以拿到hash值 参考：http://webpack.github.io/docs/long-term-caching.html - content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2); - console.log('版本是：'+JSON.stringify(stats.toJson().hash)); - //return fs.writeFileSync('build/assets.json', content); - }); - } + //会将所有的样式文件打包成一个单独的style.css + new ExtractTextPlugin( production ? "style.[hash].css" : "style.css" , { + disable: false, + allChunks: true //所有独立样式打包成一个css文件 + }), + //new ExtractTextPlugin("[name].css" ) + //自动分析重用的模块并且打包成单独的文件 + new CommonsChunkPlugin(production ? "vendor.[hash].js" : "vendor.js" ), + function(){ + return this.plugin('done', function(stats) { + var content; + //这里可以拿到hash值 参考：http://webpack.github.io/docs/long-term-caching.html + content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2); + console.log('版本是：'+JSON.stringify(stats.toJson().hash)); + //return fs.writeFileSync('build/assets.json', content); + }); + } ]; //发布编译时，压缩，版本控制 if (process.env.PRODUCTION) { - //压缩 - plugins.push(new webpack.optimize.UglifyJsPlugin({compress: {warnings: false } })); + plugins.push(new webpack.optimize.UglifyJsPlugin({compress: {warnings: false } })); //压缩 } /* - 版本控制 - package.json中的 + 一：版本控制 + package.json中的 "html-webpack-plugin": "^1.6.2", - 模块是把生成的带有md5戳的文件，插入到index.html中。 - 通过index.tpl模板，生成 index.html + 模块是把生成的带有md5戳的文件，插入到index.html中。 + 通过index.tpl模板，生成 index.html + HtmlWebpackPlugin文档 https://www.npmjs.com/package/html-webpack-plugin + https://github.com/ampedandwired/html-webpack-plugin/issues/52 */ var HtmlWebpackPlugin = require("html-webpack-plugin"); -//HtmlWebpackPlugin文档 https://www.npmjs.com/package/html-webpack-plugin -//https://github.com/ampedandwired/html-webpack-plugin/issues/52 -plugins.push( new HtmlWebpackPlugin({ - filename:'../index.html',//会生成index.html在根目录下,并注入脚本 - template:'index.tpl', - inject:true //此参数必须加上，不加不注入 -})); - + plugins.push( new HtmlWebpackPlugin({ + filename:'../index.html',//会生成index.html在根目录下,并注入脚本 + template:'index.tpl', + inject:true //此参数必须加上，不加不注入 + })); +/* + 二：编译后自动打开浏览器 2016/08/19 +*/ +var OpenBrowserPlugin = require('open-browser-webpack-plugin'); + plugins.push(new OpenBrowserPlugin({ url: 'http://localhost:8080' })); +/* + publicPath路径就是你发布之后的路径， + 比如你想发布到你站点的/util/vue/build 目录下, 那么设置 + publicPath: "/util/vue/build/", + 此字段配置如果不正确，发布后资源定位不对，比如：css里面的精灵图路径错误 +*/ module.exports = { entry: ["./src/app.js"], output: { path: "./build", - /* - publicPath路径就是你发布之后的路径， - 比如你想发布到你站点的/util/vue/build 目录下, 那么设置 - publicPath: "/util/vue/build/", - 此字段配置如果不正确，发布后资源定位不对，比如：css里面的精灵图路径错误 - */ publicPath: "/build/", //"build.[hash].js"//[hash]MD5戳 解决html的资源的定位可以使用 webpack提供的HtmlWebpackPlugin插件来解决这个问题 见：http://segmentfault.com/a/1190000003499526 资源路径切换 filename: production ? "build.[hash].js" : "build.js"