webpack3.x文件配置讲解

webpack3.x 配置

webpack3.x 主配置webpack.config.js文件，每个模块的详细信息都有一定的注释，如果有不对的地方，还请指教！

大纲：

1、创建package.json文件

2、创建.babelrc文件

3、创建webpack.config文件

目前3个文件即可,下面具体介绍：

一、基础配置

1、首先全局安装webpack 的基础配置，

npm i webpack -g

在本地如果没有package.json 文件，可以执行初始化操作

npm init

2、创建package.json 文件

{
  "name": "demo",
  "version": "1.0.3",
  "description": "EOI",
  "main": "gulpfile.js",
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "vue": "^2.4.4",
    "vue-hot-reload-api": "^2.1.0",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.5",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.7.0",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.4.4",
    "vue-touch": "^1.1.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "enhanced-resolve": "^3.4.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.3.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-sftp": "^0.1.5",
    "html-webpack-plugin": "^2.30.1",
    "ip": "^1.1.5",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "path": "^0.12.7",
    "react": "^16.0.0",
    "style-loader": "^0.18.2",
    "text-loader": "^0.0.1",
    "url-loader": "^0.5.9",
    "vue": "^2.4.4",
    "vue-loader": "^13.0.5",
    "vue-router": "^2.7.0",
    "vuex": "^2.4.1",
    "watchpack": "^1.4.0",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "xml-loader": "^1.2.1"
  },
  "scripts": {
    "build": "set NODE_ENV=prod&&gulp imgMin --progress --colors",
    "testBuild": "gulp TestBuild --progress --colors",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
    "devTest": "gulp devTest",
    "devDist": "set NODE_ENV=prod&&gulp devTest218 --progress --colors",
    "devDistMainline3": "gulp devDistMainline3"
  },
  "author": "",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "bai"
  }
}

上面是webpack、vue及其es6的转码安装的版本信息介绍。

着重介绍下： package.json 文件中的scripts，这里边可以自己配置，表示启动node命令：

比如说平时运行的：npm run build、npm run dev,npm run start 等等就是在这里配置的，同时也可以自定义，如果不明白啥意思：看这里 => 点我！

二、安装使用命令：(2种安装方法，任何一种都行)

1、简单方法：
复制上面的 package.json文件到你的工作目录，执行

npm install

即可，他会自动下载 package.json文件中的所有依赖包文件

优点：省事儿方便，一条命令一部到位。

缺点：只会下载 package.json文件的指定版本，如果webpack有升级到3.x ++ 的话，就达不到你想要的效果了（我会时刻更新），如果这样，那么使用2的解决方案：

2、可以使用 npm i vue webpack --save-dev 等等去下载：

例如：

npm i --save-dev babel-core babel-loader babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-runtime clean-webpack-plugin css-loader enhanced-resolve extract-text-webpack-plugin file-loader html-webpack-plugin ip less less-loader path style-loader text-loader url-loader vue vue-loader vue-router vuex watchpack webpack webpack-dev-server xml-loader 

PS：

1、如果npm不能使用的话，可以使用淘宝的镜像cnpm,进行操作

npm install -g cnpm –registry=https://registry.npm.taobao.org

2、如果是linux系统或者mac，前面可以加上sudo，以管理员去安装，部分插件写入系统是需要管理员权限的！

三、创建webpack.config.js文件

var webpack = require('webpack'),
    path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    uglifyJsPlugin = webpack.optimize.UglifyJsPlugin,
    ip = require('ip'),
    CleanPlugin = require('clean-webpack-plugin');

console.log("======动态ip地址========= ：" + ip.address())

// 这个插件不在 Webpack 1.x 中，所以我们需要将这个文件复制到我们的项目里，webpack2.x则不需要
const HashedModuleIdsPlugin = require('./autopkg/HashedModuleIdsPlugin')

module.exports = {
    entry: {
        "babel-polyfill": "babel-polyfill", //用来解决IE9的兼容性
        app: path.resolve(__dirname, '你的入口文件路劲地址 + "/app.js"),//项目的入口文件 app.js
        vendor: ['vue', 'vue-router', 'vuex'],//公共模块的集合
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        publicPath: './', //这里必须是反斜杠且devServer.proxy.target必须存在，不然到时候index.html  script src路劲会找不到
        filename: 'assets/js/[name].js',
        chunkFilename: "chunk/[name].chunk.js",
    },
    devServer: {
        inline: true, //设置为true，代码有变化，浏览器端刷新。
        open: true, //:在默认浏览器打开url(webpack-dev-server版本> 2.0)
        port: "9000",//页面端口
        compress: true, //使用gzip压缩
        host: ip.address(),//ip地址，同时也可以设置成是localhost,
        progress: true, //让编译的输出内容带有进度和颜色
        historyApiFallback: true, //回退:支持历史API。
        contentBase: "./", //本地服务器所加载的页面所在的目录
        proxy: {
            '*': {
                target: 'https://127.0.0.1:80', //跨域Ip地址
                secure: false
            }
        }
    },
    /* 该功能主要是给css 加上前缀，兼容
     * 暂时不需要，因为加入该插件，会增加很多兼容性的样式，css代码量会成倍的增加
     */
    /*postcss: [
        require('autoprefixer') //调用autoprefixer插件
    ],*/
    resolve: {
        alias: {
            //vue的配置
            'vue': 'vue/dist/vue.min',
            'vue-router': 'vue-router/dist/vue-router.min',
            'vuex': 'vuex/dist/vuex.min',

            //react的配置
            'react': 'react/dist/react.min',
            'react-dom': 'react-dom/dist/react-dom.min',
            'redux': 'redux/dist/redux.min',
            'react-redux': 'react-redux/dist/react-redux.min',
        },
        //extensions: ['','.js', '.less', '.css', '.vue', '.jsx'],//1.0的配置
        extensions: ['.js', '.less', '.css', '.vue', '.jsx'],//2.0的配置

    },
    externals: {

    },
    module: {
        // 解决动态js url警告错误 2017-05-03
        unknownContextRegExp: /$^/,
        unknownContextCritical: false,

        // require(expr)
        exprContextRegExp: /$^/,
        exprContextCritical: false,

        // require("prefix" + expr + "surfix")
        wrappedContextRegExp: /$^/,
        wrappedContextCritical: false,
        // end

        //vue1.0 leader是可以省略的 例如：loader: 'vue',，vue2.0 是不能省略的，例如： 例如：loader: 'vue-loader'
        loaders: [{
            test: /\.vue$/,
            loader: 'vue-loader',
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }, {
            test: /\.json$/,
            loader: "json-loader"
        }, {
            test: /\.xml$/,
            loader: "xml-loader"
        }, {
            test: /\.(css|less)$/,
            loader: "style-loader!css-loader!less-loader"
        }, {
            test: /\.(png|jpg|jpeg|gif|icon|webp)$/,
            loader: 'url-loader?limit=4192&name=assets/img/[name].[hash:5].[ext]'
        }, {
            test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
            loader: "file-loader?&name=assets/fonts/[name].[ext]"
        }, {
            test: /\.txt$/,
            loader: "text-loader"
        },{
            test: /\.jsx$/,
            exclude: /node_modules/,
            loaders: ['jsx-loader', 'babel-loader']
        }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "你的入口文件路劲地址" + '/index.html'
        }),
        new HashedModuleIdsPlugin(),
        //用于合并代码，分模块更改进行打包优化，也就是说你更改这个模块，只打包这个模块，不影响你的公共文件---begin
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            chunks: ['vendor'],
        }),
        //----------------------end----------------

        new ExtractTextPlugin("assets/css/[name].[contenthash:5].css", {
            allChunks: false /*是否将分散的css文件合并成一个文件*/
        }),
        new webpack.NoErrorsPlugin() //跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
    ]
};

if(process.env.NODE_ENV == "prod") {
    //清空输出目录
    module.exports.plugins.push(new CleanPlugin(["./dist"], {
        "root": path.resolve(__dirname, ""),
        verbose: true,
        dry: false
    }));
    //代码压缩
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: true
            }
        })
    );

} else {
    //热加载插件
    module.exports.plugins.push(new webpack.HotModuleReplacementPlugin());
}

PS：介绍：

1、如果中途哪个模块出问题了，或者找不到了，直接使用npm i 模块名 --save-dev进行安装即可！

2、模块功能介绍：

webpack.config.js中的==devServer==的信息介绍：

--content-base ：内容的基本路径。
--quiet：不要将任何东西输出到控制台。
--no-info：抑制无聊的信息。
--colors：向输出添加一些颜色。
--no-colors：不要在输出中使用颜色。
--compress：使用gzip压缩。
--host ：主机名或IP。绑定到所有主机。0.0.0.0
--port ： 港口。
--inline：将webpack-dev-server运行时嵌入到包中。
--hot：添加并将HotModuleReplacementPlugin服务器切换到热模式。注意：确保不要再添加HotModuleReplacementPlugin两次。
--hot --inline还添加了webpack/hot/dev-server条目。
--public：覆盖--inline客户机模式下使用的主机和端口（对VM或Docker有用）。
--lazy：不看，根据要求进行编译（不能与之组合--hot）。
--https：通过HTTPS协议提供webpack-dev-server。包括在提供请求时使用的自签名证书。
--cert，--cacert，--key：路径的证书文件。
--open：在默认浏览器中打开url（对于webpack-dev-server版本> 2.0）。
--history-api-fallback：支持历史API后备。
--client-log-level：控制浏览器中显示的控制台日志消息。使用error，warning，info或none

四、最后一步：建立.babelrc文件

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "build": {
      "optional": ["optimisation", "minification"]
    }
  }
}

五、完成

安装成功之后，就可以配置 ==webpack.config.js== 中的你的入口文件了！