webpack笔记

webpack笔记

1、使用npm的默认配置初始化一个项目

nom init -y

 

2、安装并使用当前目录下的webpack,需要先卸载全局的webpack

npm uninstall webpack web pack-cli -g

 

3、将webpack安装在当前目录下,好处是不同工程适配不同版本的webpack

npm install webpack webpack-cli -D

 

4、安装任意版本的webpack(例:4.16.5版本)

先查看webpack的各种版本信息:npm  info webpack

再安装:npm install webpack@4.16.5 web pack-cli -D

 

5、当前目录下的webpack命令需要加npx

npx webpack

 

6、 配置文件webpack.config.json基本格式

module.exports={

entry: ‘./index.js’, //入口文件路径 

output: {

filename: ‘bundle.js’, //输出文件名

path: path.resolve(__direname, ‘bundle’) //输出文件的绝对路径

}

}

 

7、package.json中修改script字段可变更打包命令,例:npm run build

"scripts": {

    "build": "webpack"

 },

 

8、打包非js文件时需要使用loader,配置文件中增加module字段

module:{

rules:[{

test: /.jpg|png|gif$/,   //遇到jpg或png或gif格式的文件时

use: {

loader: ‘file-loader’,   //使用file-loader

options: {

name: ‘[name].[ext]’,  //file-loader配置文件名及后缀格式

}

}

}]

}

 

9、使用url-loader可以将文件转换成base64的url字符串,这样的好处是减少了一次http请求,

url-loader内嵌了file-loader,不需要重复安装file-loader

module:{

rules:[{

test: /.jpg|png|gif$/,   //遇到jpg或png或gif格式的文件时

use: {

loader: ‘url-loader’,

options: {

name: ‘[name].[ext]’, //file-loader配置文件名及后缀格式

outputPath: ‘images/’, //将这类生成的文件放在images文件夹下

limit: 204800 //小于200KB的文件使用url-loader,否则使用file-loader

}

}

}]

}

 

10、打包css、scss等样式文件时的配置

module:{

rules[{

test: /.css|scss$/,

use:[

’style-loader’,

{

loader:’css-loader’,

options: {

importLoaders: 2, //遇到新的css引入,从下往上重新走一遍loader的解析

modules: true //使用css的模块模式,引入样式只在当前js文件有效,不影响子文件

}

},

‘sass-loader’,

‘postcss-loader’

]

}]

}

 

11、htmlWepackPlugin会在打包结束后自动生成html文件,并将打包生成的JS文件

自动引入这个html中,也可以手动配置html模版

const htmlWebpackPlugin = require(‘html-webpack-plugin’) //引入html打包插件

plugins:[

new htmlWebpackPlugin({template: ’src/index.html’}). //使用src目录下的index.html作为模版

]

 

12、cleanWebpackPlugin能够再打包前清理打包输出目录。

const CleanWebpackPlugin = require(‘clean-webpack-plugin’);

Plugins:[

new CleanWebpackPlugin(‘dist’)      //dist为打包文件输出目录

]

 

13、source-map是源代码和打包代码的映射关系,cheap表示只精确到行且不映射loader等插件,module表示连同第三方插件和loader的映射也输出

eval表示通过sourceURL关联业务代码模块而不生成sourceMap文件,eval-source-map将生成的.map文件内容替换成嵌入sourceURL

devtool:’cheap-module-eval-source-map’ //开发环境最佳模式

 

14、加上—wathc命令后修改文件会自动打包(npm run webpack —watch),

但是这种方法只是将html页面当作静态界面访问,无法实现http请求或是ajax请求(产生跨域问题)

 

15、webpack-dev-server能够通过启动一个http服务器来完成代码变化时自动打包,同时更多的配置还能够

实现自动打开浏览器,无刷新修改页面等功能

启动服务器命令:npm run web pack-dev-server

webpack.config.js中的基础配置:

devServere:{

contentBase: ‘./build’ //打包文件生成目录

open: true //启动服务器时自动打开一个服务器

port: 8080 //启动端口为8080

}

 

16、webpack作为API在node中使用时,可以通过npm安装引入express服务器模块、webpack-dev-middleware打包模块

来自己实现一个带有自动打包功能的服务器(webpack-dev-server就是以上两个模块组合编写出来的)。

 

17、当修改文件后不想手动刷新页面时需要使用热模块更新插件

webpack.config.js配置:

const webpakc = require(“webpack”)

devServe:{

contentBase: ”./dist”,

hot: “true”, //开启热更新

hotOnly: true //热更新失效时是否自动刷新页面

},

plugins:[ new webpack.HotMoudleReplacementPlugin() ]  //插件引入

 

18、ES6语法转ES5语法使用babel的webpack.config.js配置

module:{

rules: [

test:  /.js$/,

exclude: /node_modules/, //对该目录下的文件不做处理

loader: “babel-loader”,

options: {

presets:[ [“@babel/preset-env”,{

useBuiltIns: ‘usage’  //只对引用到的ES6语法做转化,设置此参数后不需要在文件中引入”@babel/polyfill”

}] ]

}

]

}

 

19、preset-env会污染全局变量,因此在写类库或组件库时最好代替使用plugin-transform-runtime,

它会将babel以闭包的的方式引入,不会污染全局变量。若babel的配置项过多,

则可以将配置写进文件名为.balbelrc的配置文件中

 

20、在导入模块时,tree shaking能够过滤掉模块中不被引用部分,而只导入引用部分。

它只识别和优化ESmodule方式(import)的静态引入,不支持优化CommonJS(require)方式的动态引入

tree shaking的webpack.config,js中的配置

optimization:{

usedExports: true   //开启tree Shaking,便可只导入模块中被引用部分

}

在package.json中的配置:

“sideEffects”:[ “*.js”] //使tree Shaking不对此类文件做处理