css- loader  style-loader 处理css html文件

三、https://www.npmjs.com中搜索html-webpack-plugin可以看到对插件的详细解释
四、path:输出的时候把所有文件都放到合格目录下
publicPath:占位符，需要上线，设置时，如果设置为http://cdn.com，这样js的路径就会替换为绝对地址以http://cdn.com开头的路径，这样就能满足上线需求了。
五、minify，对上线的html进行压缩

webpack基本配置

关于入口文件entry的配置

1、entry:'./src/main.js'

2、entry:['./src/main.js','./src/a.js']

3、entry:{main:'./src/main.js',a:'./src/a.js'}

关于出口文件output

output: {

path:'./dist/js', //打包文件放的位置

filename:'[name]-[hash].js' //打包后的文件名字

}

其中占位符有三种

[name]、[hash]、[chunkhash]

css-loader作用是识别.css的文件

style-loader的作用 在文件中新建style标签，插入到文件中header标签中      

自动打包更新命令

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch

 能看到自动打包的进程 

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress

看打包的模块的话

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons

npm install webpack

111111111111

1、postcss-loader：浏览器兼容，给需要写兼容代码的样式添加前缀

2、loader是按照从右往左的顺序执行的

配置文件方式，module：{loaders：【{}】}

一。webpack的安装

    1.新建个目录 mkdir webpack-demo

    2.进入目录 cd webpack-demo

    3.初始化 npm init

    4.安装webpack npm i webpack --save-dev

二。 webpack打包

        webpack 打包文件名 打包后的文件名 例如 webpack hello.js hello.bundle.js

三，webpack的参数

        module-bind 给模块绑定loader 例如给css绑定style-loader！css-loader

        watch 监听参数

        process 打包过程参数

        等等

四。webpack的配置文件 ----webpack.config,js

        module.exports={

            entry:'./src/script/main.js',

            output:{

                path:'.dist/js',

                filename:'bundle.js'

             }

}

--config的使用

5+版本写法

高版本webpack写法

高版本webpack写法

高版本webpack写法

插圖時，沒有文字不能提交

note 2

test

webpack安装：

1. cd/imooc 

2. 新建文件夹 mkdir webpack-test

3. cd webpack-test

4. 初始化 npm npm init

5. 安装 webpack npm install webpack --save-dev 

   （--save：dependencies运行时依赖；--save-dev：devDependencies是开发时的依赖）

6. webpack天生是不支持css类型的，因此处理css文件需要依赖loader           安装 loader  npm install css-loader style-loader --save-dev                     require('style-loader!css-loader!./style.css')

7. 命令行指定 webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch(参数：自动更新和打包)

webpack模块打包工具

插件 html-webpack-plugin

安装与卸载：

删除本地（局部）webpack-cli

npm uninstall webpack-cli

删除全局webpack

npm uninstall -g webpack

删除本地webpack

npm un webpack

安装webpack：

1、创建一个新的本地项目目录名为webpack-demo

mkdir webpack-demo

2、进入目录

cd webpack-demo

3、创建package.json文件

npm init -y

4、安装webpack

# 要安装最新版本或特定版本，请运行以下命令之一：

# 第一个安装方式默认安装最新版本

npm install --save-dev webpack

# 第二个安装方式是安装你需要的版本

npm install --save-dev webpack@

5、安装webpack-cli

npm install --save-dev webpack-cli

# 不要忘记webpack4.+开始webpack-cli是必备的哦

6、检查webpack是否安装成功

node_modules/.bin/webpack -v

# 执行了这个命令以后会输出一个版本号

# 因为webpack在不断更新所以我们的版本号会有点区别，不是什么问题

测试打包：

#前面是打包文件的名称，后面的是打包后的名称

webpack hellow.js hello.bundle.js

中文官网:https://webpack.docschina.org/

中文文档:https://webpack.docschina.org/concepts/

定义:一个模块的打包器

(目标)功能:

1、切分依赖树(切分到不同的代码块,按需加载,跟懒加载概念类似)

2、保持初始化加载时间更少

3、任何一个静态资源,都可被视为一个模块在项目中被引用

4、整合第三方类库,并把第三方类库视为它的模块在项目中引用

5、可以在整个项目打包的每个过程中自定义想做的事

6、适合大型项目

跟其他打包工具的区别:

1、代码分割

2、loaders概念

3、插件系统,模块热更新特性(提高开发和调试效率)

改变资源文件引入形式，提高加载效率

采用url形式引入资源文件，页面会多次通过http请求资源文件，一定程度上影响页面加载速度，可以将文件内容直接引入代码中来优化性能。

注意：将htmlwebpackPlugin中的inject设置能false，取消自动注入

多页面入口配置

设置打包压缩规则

打包路径修改，若不设置publicPath则使用相对路径

html文件中直接使用htmlWebpackPlugin

htmlWebpackPlugin.files：获取打包后的文件信息

htmlWebpackPlugin.options：获取package.json中htmlWebpackPlugin的全部属性

注意：通过这种方式注入js引用，应将inject改为false，否则引用文件会重复生成。

html-webpack-plugin其他配置

filename：指定html打包后的文件名称

template：指定打包html模板，将基于模板进行打包

inject：指定自动生成文件位置

使打包后的文件存放到相应的目录结构中