webpack使用小记

1

webpack3.x在配置webpack.config.js时候不要写mode: 'development',该版本无法辨别此命令
以下为webpack3.x配置格式，也许与官网略有出入，但可以启动

module.exports = {    
    entry: './scripts/app.js',
    output: {
        filename: './dist/bundle.js'      
},
mudule:{
    ......
}

webpack4.x配置时候需要写mode: 'development',

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  },
mudule:{
    ......
}

2

有时候配置webpack压缩css很苦，安装依赖也很苦，有一个省工的方法
如果你全局安装过的node-sass，你可以使用它来压缩css
在git bash或者终端输入 node-sass --output-style compressed scss已写完的文件夹 > 输出的css文件夹

3

假如你本地全局安装webpack4.x，但是你的项目安装的是webpack3.x，建议在package.json文件夹中"scripts"配置一个脚本便于本地启动低版本webpack

"start": "webpack --config webpack.config.js"
"start": "node_modules/.bin/webpack"

这两个命令都可以本地启动webpack
如果是webpack2.x建议看看官网文档再使用该命令