JLNTV_IPD/vue3-h5-template
4
0
Fork 0
mirror of https://github.com/xxxsf/vue3-h5-template.git synced 2025-09-02 04:19:51 +08:00
Code Issues Projects Releases Wiki Activity

change webpack

Browse Source
This commit is contained in:
xsf 2016-08-19 11:38:07 +08:00
parent 53762aebc6
commit 066917e842
2 changed files with 57 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -3,7 +3,8 @@
"version": "1.0.0", "version": "1.0.0",
"main": "index.js", "main": "index.js",
"dependencies": { "dependencies": {
"extract-text-webpack-plugin": "^0.8.2" "extract-text-webpack-plugin": "^0.8.2",
"open-browser-webpack-plugin": "^0.0.2"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.3.17", "babel-core": "^6.3.17",
@ -43,4 +44,4 @@
}, },
"author": "", "author": "",
"license": "ISC" "license": "ISC"
} }

116
webpack.config.js
View File

@ -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'), var fs = require('fs'),
buildPath='./build/'; buildPath='./build/';
var folder_exists = fs.existsSync(buildPath); var folder_exists = fs.existsSync(buildPath);
if(folder_exists == true) if(folder_exists == true) {
{
var dirList = fs.readdirSync(buildPath); var dirList = fs.readdirSync(buildPath);
dirList.forEach(function(fileName) dirList.forEach(function(fileName)
{ {
@ -15,9 +16,11 @@ if(folder_exists == true)
console.log("clearing " + buildPath); console.log("clearing " + buildPath);
}; };
//readfile方法: 进行文件数据的读取 /*
//writeFile方法: 将数据写入文件到某个文件夹下 readfile方法: 进行文件数据的读取
//先把index.html里面关于style和js的hash值都删除掉，避免在使用 npm run dev 的时候，路径还是压缩后的路径 writeFile方法: 将数据写入文件到某个文件夹下
先把index.html里面关于style和js的hash值都删除掉，避免在使用 npm run dev 的时候，路径还是压缩后的路径
*/
fs.readFile("index.html",'utf-8',function(err,data){ fs.readFile("index.html",'utf-8',function(err,data){
if(err){ if(err){
console.log("error"); console.log("error");
@ -27,79 +30,68 @@ fs.readFile("index.html",'utf-8',function(err,data){
fs.writeFileSync('index.html', devhtml); fs.writeFileSync('index.html', devhtml);
} }
}); });
var webpack = require('webpack'); var webpack = require('webpack');
//var vue = require("vue-loader"); //var vue = require("vue-loader");
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//混淆压缩
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;//检测重用模块
//混淆压缩 var ExtractTextPlugin = require("extract-text-webpack-plugin");//独立样式文件
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin; var production = process.env.PRODUCTION;//在命令行 输入 “PRODUCTION=1 webpack --progress” 就会打包压缩，并且注入md5戳 到 index.html里面
//检测重用模块
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 plugins = [ var plugins = [
//会将所有的样式文件打包成一个单独的style.css //会将所有的样式文件打包成一个单独的style.css
new ExtractTextPlugin( production ? "style.[hash].css" : "style.css" , { new ExtractTextPlugin( production ? "style.[hash].css" : "style.css" , {
disable: false, disable: false,
allChunks: true //所有独立样式打包成一个css文件 allChunks: true //所有独立样式打包成一个css文件
}), }),
//new ExtractTextPlugin("[name].css" ) //new ExtractTextPlugin("[name].css" )
//自动分析重用的模块并且打包成单独的文件 //自动分析重用的模块并且打包成单独的文件
new CommonsChunkPlugin(production ? "vendor.[hash].js" : "vendor.js" ), new CommonsChunkPlugin(production ? "vendor.[hash].js" : "vendor.js" ),
function(){ function(){
return this.plugin('done', function(stats) { return this.plugin('done', function(stats) {
var content; var content;
//这里可以拿到hash值 参考：http://webpack.github.io/docs/long-term-caching.html //这里可以拿到hash值 参考：http://webpack.github.io/docs/long-term-caching.html
content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2); content = JSON.stringify(stats.toJson().assetsByChunkName, null, 2);
console.log('版本是：'+JSON.stringify(stats.toJson().hash)); console.log('版本是：'+JSON.stringify(stats.toJson().hash));
//return fs.writeFileSync('build/assets.json', content); //return fs.writeFileSync('build/assets.json', content);
}); });
} }
]; ];
//发布编译时，压缩，版本控制 //发布编译时，压缩，版本控制
if (process.env.PRODUCTION) { 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", "html-webpack-plugin": "^1.6.2",
模块是把生成的带有md5戳的文件，插入到index.html中。 模块是把生成的带有md5戳的文件，插入到index.html中。
通过index.tpl模板，生成 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"); var HtmlWebpackPlugin = require("html-webpack-plugin");
//HtmlWebpackPlugin文档 https://www.npmjs.com/package/html-webpack-plugin plugins.push( new HtmlWebpackPlugin({
//https://github.com/ampedandwired/html-webpack-plugin/issues/52 filename:'../index.html',//会生成index.html在根目录下,并注入脚本
plugins.push( new HtmlWebpackPlugin({ template:'index.tpl',
filename:'../index.html',//会生成index.html在根目录下,并注入脚本 inject:true //此参数必须加上，不加不注入
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 = { module.exports = {
entry: ["./src/app.js"], entry: ["./src/app.js"],
output: { output: {
path: "./build", path: "./build",
/*
publicPath路径就是你发布之后的路径，
比如你想发布到你站点的/util/vue/build 目录下, 那么设置
publicPath: "/util/vue/build/",
此字段配置如果不正确，发布后资源定位不对，比如：css里面的精灵图路径错误
*/
publicPath: "/build/", publicPath: "/build/",
//"build.[hash].js"//[hash]MD5戳 解决html的资源的定位可以使用 webpack提供的HtmlWebpackPlugin插件来解决这个问题 见：http://segmentfault.com/a/1190000003499526 资源路径切换 //"build.[hash].js"//[hash]MD5戳 解决html的资源的定位可以使用 webpack提供的HtmlWebpackPlugin插件来解决这个问题 见：http://segmentfault.com/a/1190000003499526 资源路径切换
filename: production ? "build.[hash].js" : "build.js" filename: production ? "build.[hash].js" : "build.js"