https://webpack.docschina.org/guides/getting-started

1.6.1 webpack 列表隔行变色案例

  1. 运行npm init -y初始化项目，使用npm管理项目中的依赖包
  2. 创建项目基本的目录结构
    1545011845124.png
  3. 使用npm i jquery --save安装jquery类库
  4. index.html

<!DOCTYPE html>

















  • A

  • B

  • C

  • D

  • E

  • F



  1. 创建main.js并书写各行变色的代码逻辑：

// 1. 导入 Jquery
// import from 是ES6中导入模块的方式
// 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错
import $ from ‘jquery’
//const $ = require(‘jquery’) express导包的语法，vue中使用es6导包的语法，import .. from ..
// 设置偶数行背景色，索引从0开始，0是偶数
$(function () {
$(‘li:odd’).css(‘backgroundColor’, ‘yellow’)
$(‘li:even’).css(‘backgroundColor’, function () {
return ‘#’ + ‘D97634’
})
})

  1. 注意点
  • 直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
    - 运行webpack 入口文件路径 输出文件路径对main.js进行处理：
    webpack ./src/main.js -o ./dist/bundle.js
    - webpack使用的是CommonJS模块化规范，即require引入模块，module.exports导出模块
    Vue中使用的是ES6的模块化规范，即import from 引入模块，export /export default导出模块

    1.6.2 webpack配置文件使用

  1. 在项目根目录中创建webpack.config.js
  2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

// 导入处理路径的模块
var path = require(‘path’);
// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
entry: path.resolve(dirname, ‘src/main.js’), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(dirname, ‘dist’), // 配置输出的路径
filename: ‘bundle.js’ // 配置输出的文件名
}
}

  1. 使用命令打包构建

使用webpack命令即可打包项目、
webpack //没有指定webpack打包的配置文件，默认使用项目根路径下的webpack.config.js文件
webpack —config webpack.config.js //指定webpack打包的时候使用的配置文件
// 当我们在控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
// 1. 首先webpack 发现我们并没有通过命令的形式给它指定入口和出口
// 2. webpack 就会去项目的根目录中查找一个叫做 webpack.config.js 的配置文件
// 3. 当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
// 4. 当 webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建；

1.6.3 webpack实时打包构建

  1. 由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
  2. 安装webpack-dev-server

npm i webpack-dev-server@3.1.9 —save-dev
npm i webpack@4.27.1 —save-dev //项目中安装webpack
npm i webpack-cli@3.1.2 —save-dev

  1. 安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，因为它不是全局命令，不可以直接使用。

  2. 我们借助于package.json文件中的指令来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包

    “scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1”,
    “dev”: “webpack-dev-server”
    }

  3. 运行项目

npm run dev

  1. 但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中。把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快

Project is running at [1m [34mhttp://localhost:8084/ [39m[22m
webpack output is served from /

  1. 此时我们可以通过http://localhost:8083/bundle.js 文件，因为webpack-dev-server默认是将bundle.js文件打包到根路径，所以要能做到修改main.js之后页面也要同步变化，需要修改页面的script标签：

  1. 6.指定启动参数：
    为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用—contentBase src指令来修改dev指令，指定启动的根目录：

    “scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1”,
    “dev”: “webpack-dev-server —open —port 3001 —contentBase src —hot”
    },

    // —open含义：构建完成自动打开浏览器
    // —port 3001 : 指定运行的端口
    // —contentBase src : 指定运行的根目录是src，即认为src就是项目根目录
    // —hot : 热更新，是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。
    7.解决webpack4.0之后打包大小警告和热更新慢的问题
    https://cloud.tencent.com/developer/section/1477466
    #main.js
    const path = require(‘path’)
    module.exports = {
    //1.设置为开发模式，不然热更新会比较缓慢
    mode:”development”,
    entry: path.resolve(dirname, ‘src/main.js’),
    output: {
    path: path.resolve(    dirname, ‘dist’),
    filename: ‘bundle.js’
    },
    //2.打包文件大小警告和错误的问题
    performance: {
    hints:false
    }
    }

    1.6.4 配置文件生成webpack-dev-server参数(了解)

    const path = require(‘path’)
    // 启用热更新的 第2步
    const webpack = require(‘webpack’)
    module.exports = {
    entry: path.join(dirname, ‘./src/main.js’),
    output: {
    path: path.join(    dirname, ‘./dist’),
    filename: ‘bundle.js’
    },
    devServer: {
    // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    // —open —port 3000 —contentBase src —hot
    open: true, // 自动打开浏览器
    port: 3000, // 设置启动时候的运行端口
    contentBase: ‘src’, // 指定托管的根目录
    hot: true // 启用热更新 的 第1步
    },
    plugins: [ // 配置插件的节点
    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
    ],
    }

    1.6.5 html-webpack-plugin插件配置启动页面

    https://www.npmjs.com/package/html-webpack-plugin
    html-webpack-plugin插件可以将指定页面配置生成到内存中，并且可以将打包的bundle.js配置到内存中生成的html页面中，使用步骤如下：

  2. 运行npm i html-webpack-plugin@3.2.0 --save-dev安装到开发依赖

  3. 修改webpack.config.js配置文件如下：

const path = require(‘path’)
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: path.join(dirname, ‘./src/main.js’),
output: {
path: path.join(dirname, ‘./dist’),
filename: ‘bundle.js’
},
plugins: [
// 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, ‘src/index.html’),//模板路径
filename:’index.html’//自动生成的HTML文件的名称
})
],
}

  1. 修改package.json中script节点中的dev指令如下：

“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“dev”: “webpack-dev-server —open —port 3001 —contentBase src —hot”
},

  1. 将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！

    1.6.6 使用webpack打包css文件

    一般情况下，我们并不推荐在html页面中直接引入其他css文件，这样会导致过多的请求。对应的，我们可以使用webpack来构建。使用步骤如下：

  2. 运行 npm i style-loader css-loader --save-dev

  3. main.js中引入index.css

import “./css/index.css”

  1. 修改webpack.config.js这个配置文件：

// 用来配置第三方loader模块的
module: {
rules: [
// 匹配以.css结尾的文件
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] }//处理css文件的规则
]
}

  1. webpack 处理第三方文件类型的过程

  2. 发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方 loader 规则
    2. 如果能找到对应的规则， 就会调用对应的loader处理这种文件类型；
    3. 在调用loader的时候，use中相关loader模块的调用顺序是从后向前调用的；
    4. 当最后的一个loader调用完毕，会把处理的结果直接交给 webpack 进行打包合并，最终输出到 bundle.js 中去

    1.6.7 使用webpack打包less文件

  3. 运行npm i less-loader less，需要同时安装less-loader和less

  4. main.js中引入index.less

import “./css/index.less”

  1. 修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] },//处理css文件的规则
{ test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] }
]
}

1.6.8 使用webpack打包sass文件

  1. 运行npm i sass-loader@7.3.1 node-sass --save-dev

npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass

  1. main.js中引入index.scss

//注意：文件名是scss结尾
import “./css/index.scss”

  1. 在webpack.config.js中添加处理scss文件的loader模块：

module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] },//处理css文件的规则
{ test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] },
{ test: /.scss$/, use: [‘style-loader’, ‘css-loader’, ‘sass-loader’] }
]
}

1.6.9 使用webpack处理css中的路径

  1. 运行npm i url-loader file-loader --save-dev
  2. 在webpack.config.js中添加处理url路径的loader模块：

module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] },//处理css文件的规则
{ test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] },
{ test: /.scss$/, use: [‘style-loader’, ‘css-loader’, ‘sass-loader’] },
{ test: /.(png|jpg|gif|bmp|jpeg)$/, use: ‘url-loader’ }
]
}

  1. index.css

div{
width: 600px;
height: 450px;
background-image: url(../images/1.jpg);
}
//注意点：url-loader默认情况下会将图片转换为base64编码的图片，好处是可以减少图片的二次请求。但是这种方式一般情况下适用于小图，如果是大图，我们可以像下面这样去使用：
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] },//处理css文件的规则
{ test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] },
{ test: /.scss$/, use: [‘style-loader’, ‘css-loader’, ‘sass-loader’] },
{ test: /.(png|jpg|gif|bmp|jpeg)$/,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192,
name:’[hash:8]-[name].[ext]’
}
}
]
}
]
}
//limit ： 当图片大小小于等于指定的值时会进行base64编码
//name =[name].[ext]： 不给图片重命名，还是使用原图名。如果没有这个属性，则默认会使用hashcode的方式来给图片重命名。
//给图片重命名的好处是：如果在多个不同的目录下有两张同名的图片(内容不同)，不会产生冲突。(默认情况下webpack会将图片也打包到根路径下)
//如果既想多个文件夹下的同名的图片被打包后不冲突，又想保留原来的图片名字，可以这样使用：name=[hash:8]-[name].[ext] ， [hash:8]表示保留8位hash值，然后再去追加原来的[name]

1.6.10 使用webpack处理字体图标

1.运行npm i bootstrap@3.3.5安装boostrap
2.main.js引入bootstrap
//注意：这边import的时候不需要加上 node_modules目录，import前面没有路径的时候会自动从node_modules目录下去查找
import “bootstrap/dist/css/bootstrap.css”
3.index.html

4.webpack.config.js修改匹配规则。因为boostrap的字体文件中也使用了url，所以字体文件的路径一样要处理
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] },//处理css文件的规则
{ test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] },
{ test: /.scss$/, use: [‘style-loader’, ‘css-loader’, ‘sass-loader’] },
{
test: /.(png|jpg|gif|bmp|jpeg)$/,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192,
name:’[hash:8]-[name].[ext]’
}
}
]
},
{ test: /.(ttf|eot|svg|woff|woff2)$/,
use: [
{
loader:’url-loader’
}
]
}, // 处理 字体文件的 loader
]
}

1.6.11 webpack中babel的配置

在 webpack 中，默认只能处理一部分 ES6 的新语法；这时候就需要借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader可以把高级语法转为低级的语法，然后再把结果交给 webpack 去打包到 bundle.js 中

  1. 运行npm i babel-core@6.26.3 babel-loader@7.1.5 babel-plugin-transform-runtime --save-dev安装babel的相关loader包 (babel的转换工具)
  2. 运行npm i babel-preset-env babel-preset-stage-0 --save-dev安装babel转换的语法 (es6的语法和es5的语法的对应关系)
  3. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] },//处理css文件的规则
{ test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] },
{ test: /.scss$/, use: [‘style-loader’, ‘css-loader’, ‘sass-loader’] },
{ test: /.(png|jpg|gif|bmp|jpeg)$/, use: ‘url-loader?limit=1024&name=[hash:8]-[name].[ext]’ },
{ test: /.(ttf|eot|svg|woff|woff2)$/, use: ‘url-loader’ }, // 处理 字体文件的 loader
//配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉
{ test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/ },
]
}

  1. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下(这个文件必须符合json的语法，不能有注释。字符串必须使用双引号)：

{
“presets”: [“env”, “stage-0”],
“plugins”: [“transform-runtime”]
}
注意：之前用的比较多的语法插件babel-preset-es2015更新为babel-preset-env，它包含了所有的ES相关的语法；

1.6.12 所有配置总结

1.安装
npm i webpack@4.20.1 —save-dev //安装webpack
npm init -y //项目初始化
npm i webpack-dev-server@3.1.9 —save-dev //实时打包构建
npm i webpack-cli@3.1.2
npm i html-webpack-plugin@3.2.0 —save-dev //配置内存页面
npm i style-loader css-loader —save-dev //css加载器
npm i less-loader less //less加载器
npm i sass-loader@7.3.1 node-sass —save-dev //sass加载器
npm i url-loader file-loader —save-dev //url加载器
npm i babel-core@6.26.3 babel-loader@7.1.5 babel-plugin-transform-runtime —save-dev //babel转换工具
npm i babel-preset-env babel-preset-stage-0 —save-dev //babel转换的语法
#2.webpack.config.js
const path = require(‘path’)
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: path.join(dirname, ‘./src/main.js’),
output: {
path: path.join(dirname, ‘./dist’),
filename: ‘bundle.js’
},
plugins: [
// 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, ‘src/index.html’),//模板路径
filename:’index.html’//自动生成的HTML文件的名称
})
],
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] },//处理css文件的规则
{ test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] },
{ test: /.scss$/, use: [‘style-loader’, ‘css-loader’, ‘sass-loader’] },
{ test: /.(png|jpg|gif|bmp|jpeg)$/, use: ‘url-loader?limit=1024&name=[hash:8]-[name].[ext]’ },
{ test: /.(ttf|eot|svg|woff|woff2)$/, use: ‘url-loader’ }, // 处理 字体文件的 loader
//配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉
{ test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/ },
]
}
}
#3.项目入口文件
import “./css/index.css”
console.log(“ok”);
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
showInfo(){
console.log(this.name);
}
}
var p = new Person(“xiaoming”,18);
console.log(p.name);
#4.package.json
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“dev”: “webpack-dev-server —open —port 3000 —contentBase src —hot”
}
#5.项目根目录 .babelrc
{
“presets”: [“env”, “stage-0”],
“plugins”: [“transform-runtime”]
}