webpack学习笔记

最新推荐文章于 2024-08-05 00:34:55 发布

gwm4230670

最新推荐文章于 2024-08-05 00:34:55 发布

阅读量287

点赞数

本文链接：https://blog.csdn.net/gwm4230670/article/details/50522483

版权

把图片转化为base64，需要url-loader
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }
};
编译css样式 需要 style-loader和css-loader
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
  }
};

编译react，需要 babel-loader，babel-preset-es2015，babel-preset-react
module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react',
      },
    ]
  }
};

添加插件：webpack混淆插件

var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}