webpack使用笔记

安装webpack

首先确保已经安装了最新版的node.js

打开命令行切换到项目文件夹安装webpack

npm install --save-dev webpack

使用配置文件进行构建

在项目文件夹下新建一个配置文件webpack.config.js

const path = require('path');

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

切换到当前文件夹输入以下命令进行构建

npx webpack --config webpack.config.js

加载css

为了从 JS 模块中引入一个 CSS 文件需要安装style-loader和css-loader。

npm install --save-dev style-loader css-loader

修改配置文件webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
  	rules: [{
  		test: /\.css$/,
  		use: ['style-loader', 'css-loader']
   	}]
  }
};

在js文件中引入css

require('../css/style.css');

使用HtmlWebpackPlugin

安装HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

修改配置文件webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 加入 html 模板任务
    new HtmlWebpackPlugin({
        // 模板文件
        template: './src/index.html',
        // 打包后文件名称，会自动放到 output 指定的 dist 目录
        filename: 'index.html'
    })
  ]
};

使用CopyWebpackPlugin复制文件

安装CopyWebpackPlugin

npm install --save-dev copy-webpack-plugin

修改配置文件

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 复制文件
    new CopyWebpackPlugin([
      {
        // 目标文件
        from: './src/images',
        // 输出到
        to: './images'
      }
    ])
  ]
};

使用UglifyJsPlugin压缩文件

安装UglifyJsPlugin

npm i -D uglifyjs-webpack-plugin

修改配置文件webpack.config.js

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 压缩文件
    new UglifyJsPlugin()
  ]
};

使用ExtractTextWebpackPlugin打包css文件

安装ExtractTextWebpackPlugin

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

在webpack 4x下使用这个版本会报错所以我们选择安装最新的版本

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

在index.js中引入css

require('../css/style.css');

修改配置文件

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
    }]
  },
  plugins: [new ExtractTextPlugin("style.css")]
};

使用clean-webpack-plugin

用于每次构造之前删除dist文件夹

安装

npm install clean-webpack-plugin --save-dev

修改配置文件

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 每次构建删除dist文件夹
    new CleanWebpackPlugin(['dist'])
  ]
};

使用 webpack-dev-server

安装webpack-dev-server

npm install --save-dev webpack-dev-server

修改配置文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // server
  devServer: {
    contentBase: './dist'
  }
};

修改package.json,在scripts中添加start

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open"
  },

命令行中输入 npm start运行

具体使用方法参考官方文档：https://doc.webpack-china.org/guides/