Webpack运行指令：

开发环境：

webpack ./src/index.js -o ./build/built.js --mode=development

生产环境：

webpack ./src/index.js -o ./build/built.js --mode=production

webpack会以 ./src/index.js 为入口文件开始打包，打包后输入到 ./build/built.js

  1. webpack能解决js/json资源，不能解决css/img等其余资源
    援用
  2. 生产环境和开发环境将ES6模块化编译成浏览器能辨认的模块化~
    援用
  3. 生产环境比开发环境多一个压缩js代码。

Webpack打包款式资源

在index.js文件下引入index.css款式文件，间接运行webpack指令会报错

import './index.css'function add(x, y) {  return x + y}console.log(add(1, 2));

通过配置Loader让 webpack 可能去解决那些非 JavaScript 文件

在根目录创立webpack.config.js配置文件

/*  webpack.config.js  webpack的配置文件    作用: 批示 webpack 干哪些活（当你运行 webpack 指令时，会加载外面的配置）*/// resolve用来拼接绝对路径的办法const { resolve } = require('path');module.exports = {  // webpack配置  // 入口终点  entry: './src/index.js',  // 输入  output: {    // 输入文件名    filename: 'built.js',    // 输入门路    // __dirname nodejs的变量，代表以后文件的目录绝对路径    path: resolve(__dirname, 'build')  },  // loader的配置  module: {    rules: [      // 具体loader配置      {        // 通过正则表达式匹配css文件        test: /\.css$/,        // 应用哪些loader进行解决        use: [          // use数组中loader执行程序：从右到左，从下到上 顺次执行          // 创立style标签，将js中的款式资源插入进行，增加到head中失效          'style-loader',          // 将css文件变成commonjs模块加载js中，外面内容是款式字符串          'css-loader'        ]      },      {        test: /\.less$/,        use: [          'style-loader',          'css-loader',          // 将less文件编译成css文件          // 须要下载 less-loader和less          'less-loader'        ]      }    ]  },  // 模式  mode: 'development', // 开发模式  // mode: 'production'}

通过node指令将应用到的loader进行装置；不同文件必须配置不同loader解决

npm install style-loader css-loader less-loader -D

在控制台运行webpack指令，显示胜利

Webpack打包html资源

打包html资源须要通过plugins进行配置，首先在src文件下创立index.html文件

1.装置HtmlWebpackPlugin插件
npm i html-webpack-plugin -D
2.在webpack.config.js文件中引入对应的插件

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

3.通过plugins进行配置

plugins: [    // plugins的配置    // html-webpack-plugin    // 性能：默认会创立一个空的HTML，主动引入打包输入的所有资源（JS/CSS）    // 需要：须要有构造的HTML文件    new HtmlWebpackPlugin({      // 复制 './src/index.html' 文件，并主动引入打包输入的所有资源（JS/CSS）      template: './src/index.html'    })]
留神：在 './src/index.html' 文件中不须要在手动引入其余资源文件

运行webpack指令就会在build文件夹下生成index.html文件，打包后的js文件也会主动的引入