webpack打包教程

标签：cal   processor   server   方式   文件   row   刷新   cli   tput   

2. 1. 安装node
      node官网地址: https://nodejs.org/zh-cn/

3. 创建package.json文件
   命令：npm init

4. 安装webpack
   npm install --save-dev webpack
   npm install --save-dev webpack-cli

全局安装：
npm install --global webpack webpack-cli

4. 打包
   默认entry入口 src/index.js
   默认output出口 dist/main.js

打包模式：
webpack --mode development
webpack --mode production

二、配置webpack.config.js

1. 新建一个webpack.config.js

2. 配置入口entry(所需打包的文件路径)

3. 配置出口output

（1）path指文件打包后的存放路径
（2）path.resolve()方法将路径或路径片段的序列处理成绝对路径
（3）__dirname 表示当前文件所在的目录的绝对路径
（4）filename是打包后文件的名称

三、入口entry和出口output进阶用法

1. 入口entry

（1）单入口

单文件：
例如： entry：‘./src/index.js’

多文件：
在你想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk”时，传入数组的方式就很有用。

例如：entry：[‘./src/index.js’,‘./src/index2.js’,.......]

（2）多入口

例如：
entry:{
pageOne: ‘./src/pageOne/index.js‘,
pageTwo: ‘./src/pageTwo/index.js‘,
pageThree: ‘./src/pageThree/index.js‘
}

2. 出口output

（1）单出口

output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘bundle.js‘
}

（2）多出口

output：{
path:path.resolve(__dirname,‘dist‘),
filename:‘[name].js‘
}

四、配置webpack-dev-server

1. 了解webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

webpack-dev-server 主要提供两个功能：
（1）为静态文件提供服务
（2）自动刷新和热替换(HMR)

2. 安装webpack-dev-server

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

3. 配置webpack.config.js文件

devServer:{
contentBase:‘./build, //设置服务器访问的基本目录
host:‘localhost‘, //服务器的ip地址
port:8080, //端口
open:true //自动打开页面
}

4. 配置package.json

"scripts": {
"start": "webpack-dev-server --mode development"
}

五、1. 了解loader

    loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

2. 安装loader

安装style-loader和css-loader

下载：
npm install style-loader css-loader --save-dev

3. 配置loader

（1）在webpack.config.js文件里配置module中的rules

在 webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2. use 属性，表示进行转换时，应该使用哪个 loader。

代码：

九、使用PostCSS处理浏览器前缀

（1）处理效果

（2）安装loader

安装postcss-loader和autoprefixer

下载：
npm install --save-dev postcss-loader autoprefixer

（3）配置loader

需要和autoprefixer一起用

浏览器设置：

Loader中设置：
{
browsers: [
‘ie >= 8‘,//ie版本大于等于ie8
‘Firefox >= 20‘,//火狐浏览器大于20版本
‘Safari >= 5‘,//safari大于5版本
‘Android >= 4‘,//版本大于Android4
‘Ios >= 6‘,//版本大于ios6
‘last 4 version‘//浏览器最新的四个版本
]
}

或者在package.json里加上下图设置：

十、文件处理

1. 图片处理
   （1）安装loader
   下载安装file-loader
   npm install --save-dev file-loader

（2）配置config文件

（3）选项配置

        配置options：

name：为你的文件配置自定义文件名模板（默认值[hash].[ext]）
context：配置自定义文件的上下文，默认为 webpack.config.js
publicPath：为你的文件配置自定义 public 发布目录
outputPath：为你的文件配置自定义 output 输出目录

                [ext]：资源扩展名
                [name]：资源的基本名称
                [path]：资源相对于 context的路径
                [hash]：内容的哈希值

2. 字体文件处理
   （1）下载字体文件
   以bootstrap字体文件为例子
   Boostrap字体文件下载地址：https://v3.bootcss.com/getting-started/

（2）配置config文件

3. 第三方 js库处理
   以jquery库为例子
   （1）本地导入
   编写配置文件：

           webpack.ProvidePlugin参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

   如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着设置的路径一直找下去

       使用webpack.ProvidePlugin前需要引入webpack

   
   

（2）npm安装模块

        安装jquery库：
            npm install jquery --save-dev

        直接在js里import引入
        Import $ from‘jquery’

十一、编译es6

1. 了解babel
   目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具

babel转化语法所需依赖项：
babel-loader： 负责 es6 语法转化
babel-core： babel核心包
babel-preset-env：告诉babel使用哪种转码规则进行文件处理

2. 安装依赖

npm install babel-loader @babel/core @babel/preset-env --save-dev

3. 配置config文件

exclude表示不在指定目录查找相关文件

4. 新建 .babelrc 文件配置转换规则
   
   5. 另一种规则配置
      .

十二、生成HTML(html-webpack-plugin)

1. 了解html-webpack-plugin

HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。

根据src下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里

2. 安装依赖

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

3. 配置config文件
   
   

十三、提取分离css

1. 处理效果
   将所有的入口 chunk(entry chunks)中引用的 css，移动到独立分离的 CSS 文件
   
2. ExtractTextPlugin插件

（1）安装（下载）

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

（2）配置config文件

引入插件：

Rules设置：
fallback:编译后用什么loader来提取css文件

Plugins设置

3. mini-css-extract-plugin插件

（1）安装（下载）

npm install --save-dev mini-css-extract-plugin

（2）配置config文件

引入插件

Rules设置：

Plugins设置

十四、压缩css及优化css结构

1. 处理效果
   

2. optimize-css-assets-webpack-plugin插件

（1）安装（下载）

                npm install --save-dev optimize-css-assets-webpack-plugin

（2）配置config文件

引入插件：

Plugins设置

assetNameRegExp: 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /.css$/g
cssProcessor: 用于压缩和优化CSS 的处理器，默认是 cssnano.
cssProcessorPluginOptions:传递给cssProcessor的插件选项，默认为{}
canPrint:表示插件能够在console中打印信息，默认值是true
discardComments:去除注释

十拷贝静态文件

1. 处理效果
   
   2. 安装(下载)

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

3. 配置config文件

引入插件：

Plugins设置

十五、用clean-webpack-plugin来清除文件

1. 处理效果

当我们修改带hash的文件并进行打包时，每打包一次就会生成一个新的文件，而旧的文件并没有删除。

为了解决这种情况，我们可以使用clean-webpack-plugin在打包之前将文件先清除，之后再打包出最新的文件

2. 安装

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

3. 配置config文件

   引入插件
   
   Plugin配置
   

十六、HTML中引入图片

1. 处理效果

未使用loader时，会出现路径错误，图片不显示的情况


经过loader处理后，图片能正常显示

2. 安装

cnpm install --save-dev html-loader

3. 配置config文件

Rules中配置

十六、使用sourcemap调试

1. 了解sourcemap

Sourcemap是为了解决实际运行代码（打包后的）出现问题时无法定位到开发环境中的源代码的问题。

devtool选项

5个基本类型：
(1) eval
每个模块都使用 eval() 执行，每一个模块后会增加sourceURL来关联模块处理前后的对应关系。如下图

由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。因为不需要生成模块的sourcemap，因此打包的速度很快。

webpack打包教程

标签：cal   processor   server   方式   文件   row   刷新   cli   tput   

原文地址：https://blog.51cto.com/yht1990/2361686