webpack 安装总结

1、处理html和js文件插件
$ npm install html-webpack-plugin --save-dev

安装成功后，package.json 这个文件会多出一行 "html-webpack-plugin": "^2.30.1",，如下所示：

{
  "name": "hello-wepback",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack -d --watch",
    "prod": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.8.1"
  }
}

webpack.config.js 内容大约是下面这样的：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    minify: {
      collapseWhitespace: true,
    },
    hash: true,
  })]
};

2、处理css和scss文件插件，这个插件是把js和css混合到一个文件当中.注意 css文件是在js中使用import引入的

$ npm install --save-dev css-loader style-loader 处理css 要安装的

$ npm install sass-loader node-sass --save-dev  处理sass要安装的

webpack.console.js文件配置

 module: {
    rules: [
      {
 　　　　test: /\.scss$/,

        use: [ 'style-loader', 'css-loader', 'sass-loader' ]

 } ] }

3、css和js文件分离插件

npm install --save-dev extract-text-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: {
        collapseWhitespace: true,
      },
      hash: true,
    }),
    new ExtractTextPlugin('style.css')
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  }
};