Webpack

webpack

webpack一个项目打包工具，官网

webpack plugin

版权插件：

1 2	const webpack=require("webpack") new webpack.BannerPlugin("author saxon")//填写版权信息

打包html插件

1	npm install --save-dev html-webpack-plugin

使用插件：

const htmlWebpackPlugin = require("html-webpack-plugin")
new htmlWebpackPlugin({
            template: "index.html"//不带上script，他会自动添加，我们只要有下面这个模板就可以了
        })

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">

</div>
</body>

</html>

生成的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title></head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
<script src="bundle.js"></script>
</body>
</html>

压缩js插件

1	npm install uglifyjs-webpack-plugin --save-dev

1 2	const uglifyjs = require("uglifyjs-webpack-plugin"); new uglifyjs()

热部署插件

1	npm install webpack-dev-server --save-dev

在package.json里面配置环境变量

1	"build":"webpack-dev-server --open"/加上open 自动打开网页/

在webpack.config.js里面配置使用；

devServer:{
        contentBase:"./dist",
        inline:true
}

命令行输入：

1	npm run build

==特别需要注意的是，我们的使用要有一个叫做webpack-cli的东西，并且版本要和我们的webpack-dev-server一致，否则会报错==

配置文件合并

1	npm install webpack-merge --save-dev

配置主文件：base.config.js

"use strict";

var path = require("path");
// webpack.config.js
var VueLoaderPlugin = require('vue-loader/lib/plugin');
//带入webpack
var webpack = require("webpack");
//导入 html-webpack-plugin
var htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    //入口文件位置
    entry: "./src/main.js",
    //输出配置
    output: {
        //输出的位置
        path: path.resolve(__dirname, "../dist"),
        //输出的文件名字
        filename: "bundle.js"
    },
    module: {
        rules: [{
            //使用多个loader的时候，从右往左识别，所以先写css，再写style
            test: /\.css$/, //打包规则应用到以css结尾的文件上 test对应的不是字符串，不要加上冒号
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    name: "img/[name]-[hash:8].[ext]"
                }
            }]
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }, {
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    },
    resolve: {
        extensions: ['.vue', '.js'],
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        }
    },
    plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin(), new webpack.BannerPlugin("author saxon"), new htmlWebpackPlugin({
        template: "index.html"
    })]
};

由于我们的额node默认不支持es6，所以我们要把格式进行一个降级

生产环境 prod.config.js：

//生产环境
import uglifyjs from "uglifyjs-webpack-plugin"
//导入模块
import webPackMerge from "webpack-merge"
//
import baseConfig from "./base.config"

module.exports = webPackMerge(baseConfig,{
    plugins: [
        new uglifyjs()
    ]
})

babel格式化以后的样子：

"use strict";

var _uglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

var _uglifyjsWebpackPlugin2 = _interopRequireDefault(_uglifyjsWebpackPlugin);

var _webpackMerge = require("webpack-merge");

var _webpackMerge2 = _interopRequireDefault(_webpackMerge);

var _base = require("./base.config");

var _base2 = _interopRequireDefault(_base);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

//导入模块
module.exports = (0, _webpackMerge2.default)(_base2.default, {
    plugins: [new _uglifyjsWebpackPlugin2.default()]
});
//
//生产环境

dev.config.js

//开发环境
//导入模块
import webPackMerge from "webpack-merge"
//
import baseConfig from "./base.config"

module.exports = webPackMerge(baseConfig, {
    devServer:{
        contentBase:"./dist",
        inline:true
    }
})