webpack使用方法以及用法优化

运行./node_modules/.bin/webpack src/index.js dist/bundle.js。这是将src/index.js打包到dist/bundle.js，也可以在package.json中给这条命令换个名字。webpack内置babel,所以可以在index.js中使用es6的语法。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack src/index.js dist/bundle.js"//写在这里 在终端运行npm run build
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.5.6"
  }
}

上面的命令有个缺点，那就是大多数项目需要更复杂的设置，为了避免在终端输入太多的命令，我们需要一个配置文件。在同级目录下新建一个webpack.config.js文件:

const path = require('path');

module.exports = {
  //入口 index.js
  entry: './src/index.js',
  //输出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在终端输入./node_modules/.bin/webpack --config webpack.config.js。如果不加配置文件，webpack也会自动寻找当前目录下的webpack.config.js，上面那句话可以简写成./node_modules/.bin/webpack。
这时候package.json。中的build也可以简化成"build": "webpack"。为什么呢？是因为build命令会自动到当前目录下的./node_modules/.bin/目录下寻找可执行文件，webpack又会自动寻找当前目录下的webpack.config.js。
webpack也可以将css打包。它的打包方式是读取css文件后写到style标签里，将style标签放到head标签中。只要在index.js中输入import './path/name.css'，然后再package.json中写入一段：

const path = require('path');

module.exports = {
  //入口 index.js
  entry: './src/index.js',
  //输出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders:[
      {
        test: /\.css$/,
        use: 'style-loader!css-loader!autoprefixer-loader'
//顺序为从右向左:给属性加前缀、读取css文件到内存、加到head标签中
      }
    ]   
  }
};

上面的css加载器也可以写成以下形式

loaders:[
  {
    test: /\.css$/,
        loaders:[
          'style-loader',
          'css-loader',
          'autoprefixer-loader'
        ]
  }
]

加载图片img.src = require(./1.png)，然后在loaders中配置，运行可能会报错，提示需要安装file-loader，运行npm install -D file-loader。使用这种方法只要图片内容改变，webpack会将图片文件改名，可以解决缓存问题。（经测试import png from './1.png'的写法也可以引用图片，也就是说webpack消除了AMD、CMD以及ES module的区别）

loaders:[
  {
    test: /\.css$/,
    use: 'style-loader!css-loader!autoprefixer-loader'
  },
  {
    test: /\.(png|jpg|jpeg)$/,
    use: 'url-loader'
  }
]

每次改动后都要运行一次npm run build，这样很麻烦。所以webpack提供了webpack --watch命令来自动build。同样为了统一命令，在package.json里加一条

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack src/index.js dist/bundle.js",
    "watch": "webpack --watch"//在终端运行npm run watch
  }

使用sass时如果遇到提示安装node-sass，要先在git bash里运行
export SASS_BINARY_SITE='https://npm.taobao.org/mirrors/node-sass'再安装node-sass才可能成功
多页打包

{
    entry: {
        page1: "./page1",
        //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
        page2: ["./entry1", "./entry2"]
    },
    output: {
        path: "dist/js/page",
        filename: "[name].bundle.js"
    }
}

webpack使用方法以及用法优化

推荐阅读更多精彩内容