前端那些事【webpack】-安装

安装
全局安装

npm install webpack webpack-cli -g

项目安装

npm install webpack webpack-cli -D

webpack 的使用

2.1webpack-cli

npx 命令【npm 5.2+】
解决问题: 调用项目内部安装的模块，原理就是node_modules下的.bin目录中找到对应的命令执行
webpack命令:npx webpack

webpack4.0
特性：0配置打包构建
缺点：无法自定义很多配置
webpack 配置
四大核心概念

• 入口 (entry) : 程序的入口js
• 输出(output):打包之后的存储位置
• loader:对模块的源代码进行转换
• 插件(plugins):插件目的在于解决loader无法实现的其他事件
  步骤:
  1.配置wepacl.config.js
  2.运行npx.webpack

const path = require('path');
module.exports = {
	// 入口文件配置
	entry:'./src/index.js',
	output:{
		// 输出的地址,webpack2 规定的绝对路径
		path:path.join(__dirname,'dist'),
		// 输出文件名字
		filename:'bundle.js'
	},
	// 模式选择: 默认值为production      
	mode:'development'
}

2.3开发自动编译工具

webpack中不同选项的自动编译工具

1.webpack Watch Mode
2.webpack-dev-server [推荐]
3.webpack-dev-middleware

2.3.1 webpack Watch Mode

监视本地项目文件的变化，如果有修改的代码，就会自动打包编译，生成输出文件
运行方式
1.终端运行npx webpack --watch

npx webpack --watch

2.配置package.json 中的script
“watch”:“webpack --watch”
运行: npm run watch
3.配置webpack.config.js

const path = require('path');

module.exports={
	entry:'./src/index.js',
	output:{
		path:path.join(__dirname,'./dist'),
		filename:'builde.js'
	},
	// 模式选择： 分为 开发模式 产品模式
	mode:'development',
	// 开启侦听模式  自动监听文件变化，并生成编译文件
	watch:true
}

2.3.2 webpack-dev-server [推荐]

注意：dev-server 需要依赖webpack 必须在项目中安装webpack
1、安装webpacl npm i webpack-dev-server webpack -D
2、引入<script src='/bundle.js'></script>
3、运行： npx webpack-dev-server
4、运行 npx webpack-dev-server --hot --open --port8090
5、配置package.json 的scripts :
“dev”:“webpack-dev-server --hot --open --port8090”
–open 自动打开浏览器
–port5000 指定端口
–hot 热模块更新
“dev”:“npx webpack-dev-server --contentBase src” 指定项目文件目录
6、运行 npm run dev
devserver 会在内存中生成一个大包号的bundle.js 专供开发时使用，打包效率高 修改代码后悔自动重新打包 以及刷新浏览器 用户体验非常好

webpack.config.js

module.exports={
    // 入口
    entry:'./src/index.js',
    // 出口
    output:{
        path:path.resolve('./dist'),
        filename:'constombudle.js'
    },
    // 模式选择  development 开发模式  对代码的压缩程度小
    mode:'development',
    // 开启wacth属性  自动监听文件变化并生成文件
    //watch:true
    devServer:{
		open:true,   // 自动打开浏览器
		hot:true,  // 热模块更新
		compress:true,  
		port:3000,  // 指定端口
		contentBase:'./src'  // 指定项目目录
	}
}

修改package.json 的script “dev”:“webpack-dev-server”
运行npm run dev

2.3.3HTML插件 html-webpack-plugin

安装:

npm i html-webpack-plugin -D

安装完成之后再webpack-config.js中配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
	new HtmlWebpackPlugin({
		filename:'index.html',  // 生成的文件
		template:'./src/index.html' // 源文件
	})
]

优点：
1、根据模版在express项目根目录下生成Html文件（类似于devServer生成内存中的bundle.js）
2、自动引入bundle.js
3、打包时自动生成index.html

2.3.4 webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper) 它可以把webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求
1.安装 express 和 webpack-dev-middleware
npm i express webpack-dev-middleware -D
2.新建server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const complier = webpack(config);

app.use(webpackDevMiddleware(complier,{
	publicPath:'/'
}));
app.listen(3000,function(){
	console.log('http://localhost:3000');
})

3、配置package.json 中自定义命令

scripts:{
	"server":"node server.js"
}

4、运行 npm run server
注:使用middleware 时，必须引入html-webpack-plugin插件