Webpack配置ES6语法(含webpack配置文件)
in JavaScript with 0 comment

Webpack配置ES6语法(含webpack配置文件)

in JavaScript with 0 comment

webpack 配置详解

使 webpack.config 文件可以使用ES6语法[ webpack3.4.1 ]

1.安装babel相关包
npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev

2.在 webpack.config.js 的同目录下创建文件 .babelrc,内容如下

{
        "presets": ["es2015"]
}

3.在webpack.config.js里配置,babel6,具体如下:

{
        test: /.js$/,
        loader: 'babel-loader'
}

4.将webpack.config.js改名为webpack.config.babel.js。

5.webpack.config 的例子:

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import webpack from 'webpack';
export default {
    entry: {
        app: './src/index.js'
    },
    devtool: 'inline-source-map', //可以找到对应出错的文件的行数    在开发阶段使用
    devServer: {
        contentBase: './dist',
        compress: true,
        port: 9000,
        hot: true
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Managemant',
            filename: 'index.html',
            template: 'assets/admin.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }

            },
            {
                test: /.html$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'html-loader'
            }
        ]
    }
};

6.package.json 示例:

"scripts": {
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1",
    "test1": "a=1;b=2;echo ($a+$b)",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open"
  }

webpack-dev-server 热重载


扫描二维码,在手机上阅读!
Responses