webpack学习总结

webpack学习总结

webpack是实现前端工程化的一个工具。
什么是前端工程化？
前端工程化指的是将前端开发的流程规范化、标准化，包括开发流程、技术选型、代码规范、构建发布等用于提升前端工程师的开发效率和代码质量
webpack的作用？
如果一个界面上引用了很多个Js文件，那么就会有非常多的http请求会发往服务器，这样就会消耗服务器的资源，也会影响前端的性能。有了webpack之后，把所有的请求打包到一个请求上去，减轻了服务器的压力，再对webpack进行压缩，前端也优化了性能。

1.安装webpack

1.1 安装方式的选择

安装wbepack可以使用npm的方式也可以使用yarn的方式
npm下载速度太慢，推荐使用yarn的方式进行安装
yarn相对于webpack的而言的优势在于
yarn相对于npm的优势：
（1）yarn并行安装，同步执行所有的任务，提高了性能
（2）yarn安装版本统一
（3） 更简洁的输出
（4）多注册来源处理 yarn对安装来源进行了处理，只会从一个注册来源去安装
（5）更好的语义化

1.2 安装webpack

（1） 安装yarn

npm install -g yarn --registry=https://registry.npm.taobao.org

（2）配置淘宝源

yarn config set registry https://registry.npm.taobao.org -g

(3) 使用yarn安装

项目安装：
yarn add webpack webpack-cli -D
全局安装：
yarn add webpack webpack-cli -g

webpack全局配置文件webpack.config.js中可以定义多种关于项目的配置信息

2. webpack配置入口及输出

webpack的入口配置和输出配置指的是：webpack从哪个文件开始进行打包然后将打包之后的文件输出到哪个文件上。
webpack入口和输出配置

 const path = require('path');       //引入node中模块
 modele.exports = {
  	entry: 'index.js',                       //和webpack同级目录下的js文件 index.js
  	output: {
  		filename: 'bundle.js',                            //定义输出文件的名称
  		path: path.join(_dirname,'./dist')           //使用path来拼接输出文件路径
   }
}

3. webpack loaders加载css

webpack不只是打包js文件，也可以将样式文件（css sass等）进行打包
webpack打包css的具体实现过程
（1）安装css-loader
yarn add css-loader style-loader
(2) 编写index.css样式文件
body: {background: red}
(3) 在webpack.config.js配置文件中配置加载css样式代码

  module.exports = {
      module: {
         rules: [
         { test:/\.css$/,
        use:["style-loader","css-loader"]
        }
        ]}
  }

(4) 需要注意的是 use后面的数组的加载顺序是有要求的。必须是loader先加载后面的再加载前面的。
(5) 运行webpack 样式文件就可以生效了

4. webpack loaders加载sass

（1）安装sass
yarn add sass -D
(2) 安装node-sass
yarn add node-sass -D
(3) 在module中配置加载sass

 module.exports = {
  module: {
     rules: [
     { test:/\.sass$/,
    use:["style-loader","sass-loader"]
    }
    ]}
    }

5. webpack加载的插件

5.1 插件html-webpack-plugin

html-webpack-plugin插件的作用是可以自动的生成html文件
html-webpack-plugin插件的使用
1.引用插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
2.使用插件

module.exports = {
	entry: './index.js',
	plugins: [
         new HtmlWebpackPlugin({
					filename: 'index.html',                    //将要生成的html文件
					template: 'template.html'               //在根目录下要生成的Html文件的模板			
		})
  ]
}

3.运行webpack就可以在输出目录下生成index.html文件了

1.6.2 插件clean-webpack-plugin

clean-webpack-plugin的作用是可以清除输出目录下的多余的文件
1.安装clean-webpack-plugin
yarn add clean-webpack-plugin -D
2.使用插件

      const {CleanWebpackPlugin} = require('clean-webpack-plugin');
	  module.exports = {
		.....
		plugins: [
			new CleanWebpackPlugin()
	    ]	  
   	 }

3.运行webpack就可生效

6.webpack的热加载功能

webpack热加载的作用：因为webpack要打包的文件有改动都需要重启webpack,这样感觉非常麻烦。
如果可以实时的热加载有所改动更新的文件，那样的效率将会大大的提升

6.1 watch的配置

在package.json的scripts中配置
"watch":"webpack --watch"
npm run watch 就可以启动热加载，以后文件的改动只需要刷新浏览器，不需要重启webpack
但是这种方式只能监听到浏览器控制台是输出变化。不能监听到html页面的变化

6.2 webpack热模块更替

1.安装热模块
yarn add webpack-dev-server
2.package.json中配置
"hot": "webpack-dev-server"
3.在webpack.config.js中配置

 module.exports = {
		plugins: [
			new webpack.HotModuleReplacementPlugin()
	]
}

4.启动wewbpack热模块更替
npm run hot
HTML中内容的改变就不需要重启 只需要刷新浏览器就可以了

webpack的学习总结完成 学习总结记录第001天