webpack3.6.0使用笔记-附件

{
"name": "webpackStudy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"ser": "webpack-dev-server",
"dev": "export aaa=dev&webpack",
"build": "export aaa=build&webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@sandfox/uglifyjs-webpack-plugin": "^0.4.8",
"babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^4.1.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^0.19.0",
"uglifyjs-webpack-plugin": "^0.4.6",
"url-loader": "^0.6.2",
"watchpack": "^1.4.0",
"webpack": "^3.6.0",
"webpack-loader-options-merge": "^0.0.3"
},
"dependencies": {
"html-withimg-loader": "^0.1.16",
"jquery": "^3.2.1",
"vue": "^2.5.0"
}
}

const path = require("path");
const uglifyJsPlugin = require("uglifyjs-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const extractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require("webpack");
const entry = require("./webpack-config/entry.js");
const copyWebpackPlugin = require("copy-webpack-plugin");

console.log(encodeURIComponent(process.env.aaa));
if(process.env.aaa == "build"){
var webset = {
"publicPath" : "http://realyuing/",
"version" : "1.0.0"
};
}else{
var webset = {
"publicPath" : "localhost:9000/",
"version" : "1.0.0"
};
}

module.exports = {
target : "web",  //web默认 / node-以项目模块的方式打包

//entry : entry.dev,
entry : {
build: "./src/assets/js/build.js",
jquery : "jquery",
vue : "vue"
},
output : {
path : path.resolve(__dirname, "dist"),
filename : "[name].js",
publicPath: "/temp/"
//,publicPath : webset.publicPath + "?" +webset.version + "/"

,hotUpdateChunkFilename: "../hot/hot-update.js"
, hotUpdateMainFilename: "../hot/hot-update.json"
},
module : {
rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 100 //图片小于20kb则转成base64打包入js文件
,outputPath:"assets/images/" //图片打包后的存放路径
,name:"[name].[ext]" //[name]图片保持原名 [hash]重命名
,publicPath:"http://cdn.qianduangongcheng.com/" //如果使用cdn 设置图片打包路径前缀
}
}
]
},
{
test: /\.(htm|html)$/i,
use: ['html-withimg-loader']
}
]
},
plugins : [
//指示entry中的jquery单独打包
new webpack.optimize.CommonsChunkPlugin({
name : ["jquery", "vue"],
filename : "assets/js/[name].js",
miniChunks:2
}),

new webpack.ProvidePlugin({  //引入模块
$ : "jquery",
"jQuery" : "jquery"
}),

/*new uglifyJsPlugin({
mangle: {
props: true
}
}),*/
new htmlWebpackPlugin({
minify : {
removeAttributeNode : true
},
hash : true,
template : "./src/assets/index.html",
title : "Hi Webpack~"
//,projectPath : "http://localhost:9000/src/" //方便以后替换页面中所有图片的url
})
,
new extractTextPlugin("assets/css/style.css") //也可以写assets/css/[hash].css
,
new webpack.HotModuleReplacementPlugin()

,new copyWebpackPlugin([{
from : __dirname + "/src/public",
to : "./public"
}])
],
devServer : {
contentBase : path.resolve(__dirname, "./"),
host : "localhost",
compress : false, //compress html5
port :9000
},
watchOptions:{
poll : 1000,
aggregeateTimeout : 500,  //0.5s
ignored : /node_modules/,
}
};

{
"presets" : [
"es2015"
]
}

import css from './assets/css/index.css';
document.getElementById("title").innerHTML = 'Hello You Webpack!~~~';