WEBPACK 安装与使用

WEBPACK-4 安装与使用

---

安装:

webpack

webpack-cli 命令工具 

npm install webpack webpack-cli --save-dev

执行: 以下命令查看是否安装成功

./node_modules/.bin/webpack -v

./node_modules/.bin/webpack-cli -v

简单的案例开始

---

目录结构 

webpack 构建

默认读取 webpack.config.js 的配置文件

const path = require('path');

module.exports = {
  entry: './src/index.js',//入口文件
  output: {
    filename: 'main.js',//编译出来的文件名
    path: path.resolve(__dirname, 'dist')//编译到的目标路径
  }
};

WEBPACK 命令介绍 

---

webpack --watch //命令当文件发生变化时自动监听编译
//开启生成环境shortcut for --optimize-minimize --define
//process.env.NODE_ENV="production" 

webpack -p 

webpack --congif //指定文件配置

webpack --progress //输出构建过程

 

WEBPACK 插件介绍

---

//清除文件夹插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//模板插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
//js压缩插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

webpack.config.js 基本配置

const path = require('path');
//处理模板html自动引入JS
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除文件夹
const CleanWebpackPlugin = require('clean-webpack-plugin');
//js压缩插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  mode:"production",
  entry: {
    app:'./src/index.js'
  },
  output: {
    filename: '[name].bundle.js',//名字已入口entry 名字命名
    path: path.resolve(__dirname, 'dist')//输出文件的路径
  },
  //输出源码
  devtool: 'inline-source-map',

  /**
   * 一些优化配置
   */
  optimization:{
    //压缩js
    minimizer: [
      new UglifyJsPlugin()
    ],
    //抽离公用的js部分
    splitChunks:{
      chunks:'all'
    }
  },
  plugins:[
    //清除文件
    new CleanWebpackPlugin(['dist']),
    //设置默认环境变量
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
      LOCAL_ROOT: JSON.stringify("http://ziksang.com")
  }),
    //模板插件
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    //配合devServer 实现热更新
    new webpack.HotModuleReplacementPlugin()
  ]
};

webpack-dev-server 配置webpack 服务配置

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('./webpack.config.js');
const options = {
  contentBase: './dist',//配置根路径
  hot: true,//是否开启热更新
  host: 'localhost'
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
//启动端口
server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});

package.json

{
  "name": "webpack-skeleton",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress",
    "watch": "webpack --watch --mode=production",
    "start": "webpack-dev-server --open --mode=production",
    "devserver": "node dev-server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

WEBPACK 4.X 多入口、多页面配置

---

const path = require('path');
//处理模板html自动引入JS
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除文件夹
const CleanWebpackPlugin = require('clean-webpack-plugin');
//js压缩插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  mode: "development",
  entry: {
    entryA: path.resolve(__dirname, "src/a/a.js"),
    entryB: path.resolve(__dirname, "src/b/b.js")
  },
  output: {
    filename: './js/[name].[hash:8].bundle.js',//名字已入口entry 名字命名
    path: path.resolve(__dirname, 'dist')//输出文件的路径
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  },
  //输出源码
  devtool: 'source-map',

  /**
   * 一些优化配置
   */
  optimization: {
    //压缩js
    // minimizer: [
    //   new UglifyJsPlugin()
    // ],
    //抽离公用的js部分 , 配置自动提取node_modules里用到的模块如jquery
    splitChunks: {
      cacheGroups: {
        vendor: {
          // test: /\.js$/,
          test: /[\\/]node_modules[\\/]/,
          chunks: "initial", //表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
          name: "vendor", //拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
          enforce: true,
        }
      }
    }
  },
  plugins: [
    //清除文件
    new CleanWebpackPlugin(['dist']),
    //设置默认环境变量
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
      LOCAL_ROOT: JSON.stringify("http://ziksang.com")
    }),
    /**
     * chunks 代码块,vendor 为固定静态资源splitChunks配置,各个模板的入口 对应entry入口模块
     */
    new HtmlWebpackPlugin({
      filename: 'entryA.html',
      template: 'src/a/a.ejs',
      chunks: ['vendor','entryA'],
      inject: true
    }),
    new HtmlWebpackPlugin({
      filename: 'entryB.html',
      template: 'src/b/b.ejs',
      chunks: ['vendor','entryB'],
      inject: true
    }),
    //配合devServer 实现热更新
    new webpack.HotModuleReplacementPlugin()
  ]
};