webpack3.6.0使用笔记-附件

------ package.json ------

{
  "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"
  }
}

------ webpack.config.js ------

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/,
    }
};

------  .babelrc ------

{
  "presets" : [
    "es2015"
  ]
}

------ build.js ------

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