webpack打包路径更改_webpack打包教程

创建package.json文件

命令：npm init

安装webpack

npm install --save-dev webpack

npm install --save-dev webpack-cli

全局安装：

npm install --global webpack webpack-cli

打包

默认entry入口 src/index.js

默认output出口 dist/main.js

打包模式：

webpack --mode development

webpack --mode production

二、配置webpack.config.js

新建一个webpack.config.js

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

配置出口output

(1)path指文件打包后的存放路径

(2)path.resolve()方法将路径或路径片段的序列处理成绝对路径

(3)__dirname 表示当前文件所在的目录的绝对路径

(4)filename是打包后文件的名称

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

入口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‘

}

出口output

(1)单出口

output: {

path: path.resolve(__dirname, ‘dist‘),

filename: ‘bundle.js‘

}

(2)多出口

output：{

path:path.resolve(__dirname,‘dist‘),

filename:‘[name].js‘

}

四、配置webpack-dev-server

了解webpack-dev-server

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

webpack-dev-server 主要提供两个功能：

(1)为静态文件提供服务

(2)自动刷新和热替换(HMR)

安装webpack-dev-server

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

配置webpack.config.js文件

devServer:{

contentBase:‘./build, //设置服务器访问的基本目录

host:‘localhost‘, //服务器的ip地址

port:8080, //端口

open:true //自动打开页面

}

配置package.json

"scripts": {

"start": "webpack-dev-server --mode development"

}

五、1. 了解loader

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

安装loader

安装style-loader和css-loader

下载：

npm install style-loader css-loader --save-dev

配置loader

(1)在webpack.config.js文件里配置module中的rules

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

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

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)安装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]：内容的哈希值

字体文件处理

(1)下载字体文件

以bootstrap字体文件为例子

Boostrap字体文件下载地址：https://v3.bootcss.com/getting-started/

(2)配置config文件

第三方 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

了解babel

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

babel转化语法所需依赖项：

babel-loader： 负责 es6 语法转化

babel-core： babel核心包

babel-preset-env：告诉babel使用哪种转码规则进行文件处理

安装依赖

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

配置config文件

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

新建 .babelrc 文件配置转换规则

另一种规则配置

.

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

了解html-webpack-plugin

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

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

安装依赖

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

配置config文件

十三、提取分离css

处理效果

将所有的入口 chunk(entry chunks)中引用的 css，移动到独立分离的 CSS 文件

ExtractTextPlugin插件

(1)安装(下载)

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

(2)配置config文件

引入插件：

Rules设置：

fallback:编译后用什么loader来提取css文件

Plugins设置

mini-css-extract-plugin插件

(1)安装(下载)

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

(2)配置config文件

引入插件

Rules设置：

Plugins设置

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

处理效果

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:去除注释

十拷贝静态文件

处理效果

安装(下载)

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

配置config文件

引入插件：

Plugins设置

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

处理效果

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

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

安装

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

配置config文件

引入插件

Plugin配置

十六、HTML中引入图片

处理效果

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

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

安装

cnpm install --save-dev html-loader

配置config文件

Rules中配置

十六、使用sourcemap调试

了解sourcemap

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

devtool选项

5个基本类型：

(1) eval

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

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