phoenix中使用webpack替换掉brunch

首先删除掉brunch相关配置

yarn remove babel-brunch brunch clean-css-brunch uglify-js-brunch
rm brunch-config.js

将Webpack添加到package.json中

yarn add --dev webpack webpack-cli

将Babel添加到package.json

yarn add --dev babel-cli babel-core babel-loader babel-preset-es2015

更新package.json scripts

"scripts": {
  "deploy": "webpack --mode production",
  "start": "yarn run watch",
  "watch": "webpack --mode development --watch-stdin"
}

创建一个webpack.config.js文件

const path = require('path');
module.exports = function(env) {
  const production = process.env.NODE_ENV === 'production';
  return {
    devtool: production ? 'source-maps' : 'eval',
    entry: './js/app.js',
    output: {
      path: path.resolve(__dirname, '../priv/static/js'),
      filename: 'app.js',
      publicPath: '/',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
      ],
    },
    resolve: {
      modules: ['node_modules', path.resolve(__dirname, 'js')],
      extensions: ['.js'],
    },
  };
};

更新 config/dev.exs的watchers

watchers: [yarn: ["run", "watch", cd: Path.expand("../assets", __DIR__)]]

mix phx.server