webpack 安装与使用

安装:

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自动引入jsconst htmlwebpackplugin = require('html-webpack-plugin');//清除文件夹const cleanwebpackplugin = req连江青芝山uire('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: 'inl位卑则足羞ine-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("https://ziksang.com")  }),    //模板插件    new htmlwebpackplugin({      title: 'output management'    }),    //配合devrver 实现热更新    new webpack.hotmodulereplacementplugin()  ]};

webpack-dev-rver 配置webpack 服务配置

const webpackdevrver = require('webpack-dev-rver');const webpack = require('webpack');const config = require('./webpack.config.js');const opti最小分度值ons = {  contentba: './dist',//配置根路径  hot: true,//是否开启热更新  host: 'localhost'};webpackdevrver.adddevrverentrypoints(config, options);const compiler = webpack(config);const rver = new webpackdevrver(compiler, options);//启动端口rver.listen(5000, 'localhost', () => {  console.log('dev rver 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-rver --open --mode=production",    "devrver": "node dev-rver.js"  },  "author": "",  "licen": "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-rver": "^3.1.9"  }}