webpack是基于nodejs实现的，简单的说 Node.js 就是运行在服务端的 JavaScript（注：gulp和grunt也是基于node实现的项目构建工具）
简单地说webpack是一个静态模块打包工具（版本4.x）
一、webpack安装步骤
打包以后的代码css、html、js变成一行，并且删除注释，去掉分号
1. 全局安装
npm install webpack -g
npm install webpack-cli -g
脚手架工具，4.x必须安装两个
2. 初始化项目，生成一个package.json
npm init
3. 局部安装生成一个node_modules
npm install webpack -S
npm install webpack-cli -S
-D 就是 npm install --save-dev 安装到开发环境
-S 就是 npm install --save 安装到生产环境
-D 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而-S会将包的名称及版本号放在dependencies里面。
局部和全局都要安装一遍，不然出错
4. 打包
webpack(只能打包了js文件)
默认入口entry: src/index.js
默认出口output: dist/main.js
3.x和4.x区别在于：3.x 的时候是webpack a.js b.js 把a.js打包成 b.js，而4.x是有默认的入口文件和出口文件，只需要命令webpack即可
webpack --mode production 生产环境（默认）-----压缩
webpack --mode development 开发环境 ----------------未压缩
可以在package.json里边的scripts里边配置运行命令
{
"dependencies": {
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0"
},
"name": "webpack",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {},
"scripts": {
"start": "webpack --mode development"
},
/*可以配置，之后运行命令就是npm run start*/
"author": "",
"license": "ISC",
"description": ""
}
二、webpack配置
1. webpack本身是打包js的，如果想打包css、html、图片必须要进行相关配置
四个核心概念：入口（entry）、输出（output）、loader、插件（plugins）
2.配置文件（配置入口和出口文件）
命名:webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', //入口文件
output: {
path: path.resolve(__dirname, 'public'), //出口文件默认dist,可以修改
filename: 'bundle.js' //文件名
}
};
//打包后的代码在public/bundle.js
3.loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript），例如css和js、html、图片等文件
4.插件（plugins）
有效的打包和压缩css和js、html、图片等文件，一般loader和插件配合使用
三、本地服务（dev-server）
安装：npm install webpack-dev-server -S
配置webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', //入口文件
output: {
path: path.resolve(__dirname, 'public'), //出口文件默认dist,可以修改
filename: 'bundle.js' //文件名
},
devServer:{
contentBase:"./public", //本地服务的路径
inline:true //实时刷新
}
};
配置package.json
"scripts": {
"start": "webpack --mode development" ,
"dev":"webpack-dev-server --open --inline" //open自动打开 inline自动刷新
},
运行命令：npm run dev
之后只需要修改src里边的文件，webpack打包就可以
public文件中的index.html是自己建的，引入bundle.js
四、loader：加载程序
loader一览表：https://blog.csdn.net/keliyxyz/article/details/51649429
1.css 需要style-loader css-loader
下载：npm install style-loader css-loader -S
配置：webpack.config.js
module:{
rules:[
{
test:/\.css$/,
use: ['style-loader','css-loader']
}
]
}
此时打包到了public/bundle.js里边
2.图片，还需要下载 file-loader
下载：npm install file-loader -S
配置：webpack.config.js
module:{
rules:[
{
test:/\.css$/,
use: ['style-loader','css-loader']
},
{
test:/(\.jpg|png|jpeg)$/,
use: ['file-loader']
},
]
}
五、插件 html-webpack-plugin
src文件夹：开发阶段（写代码）文件与要与打包后的public一一对应
index.html
index.js
style.css
1.jpg
...
public文件夹：生产阶段（项目上线）
index.html
index.js
style.css
1.jpg
...
1.使用 需要配置webpack.config.js
第一步：安装
npm install html-webpack-plugin -S
第二步：配置webpack.config.js（1.引入 2.配置）
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin") //引入
module.exports = {
entry: './src/index.js', //入口文件
output: {
path: path.resolve(__dirname, 'public'), //出口文件默认dist,可以修改
filename: 'bundle-[hash].js' //文件名
},
devServer: {
contentBase: "./public", //本地服务的路径
inline: true //实时刷新
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.(jpg|png|jpeg)$/,
use: ['file-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin() //new操作符创建一个实例
]
};
此时webpack以后，在public里边会多一个index.html，在index.html里边已经引入了bundle.js
plugins:[
new HtmlWebpackPlugin({
template:"./src/index.html", //显示index.html里边的内容
//filename:"a.html", //修改默认文件，默认是index.html
minify:{ //压缩文件
removeAttributeQuotes:true, //去除引号
removecomments:true, //去除注释
removeEmptyAttributes:true, //去除空属性
collapseWhitespace:true //去除空格
}
}) //new操作符创建一个实例
]
可以百度 HtmlWebpackPlugin查看配置
https://www.npmjs.com/package/html-webpack-plugin
六、更多关于loader的配置
1.之前关于图片的配置是针对style.css文件的，但是想再index.html里边添加img
- 下载html-withimg-loader
npm install html-withimg-loader - 配置webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.(jpg|png|jpeg)$/,
use: ['file-loader']
},
{
test: /\.html$/,
use: ['html-withimg-loader']
}
]
2.字体图标
- 下载图标文件，例如bootstrap
- 配置webpack.config.js
{
test: /\.(woff|svg|ttf|eot|woff2)$/,
use: ['file-loader'] //字体文件
}
3.在src--->index.html使用图标
但此时webpack打包以后，public下的目录是乱的，可以设置参数
{
test: /\.(woff|svg|ttf|eot|woff2)$/,
use: 'file-loader?limit=1024&name=./fonts/[name].[ext]' //字体文件，可以指定文件夹名
}
放入fonts文件下，文件保持文件名，后缀也保持一直，limit设置大小
3.分离css
插件：1>下载：npm install extract-text-webpack-plugin@next -S
2>配置（第一步引入，第二部配置）
在webpack.config.js
引入：
const ExtractTextPlugin = require("extract-text-webpack-plugin")
配置：
new ExtractTextPlugin('./css/[name].css'),
还需要配置：
{
test: /\.css$/,
// use: ['style-loader','css-loader'] //css图片样式
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:[{
loader:'css-loader',
}],
publicPath:"../" //会出现找不到图片或者字体文件
})
},
4.babel-loader（为了浏览器支持ES6语法） v1版本
核心：babel-core
功能：babel-loader
babel-preset-env (babel-preset-es2015)
babel-preset-react (react有.jsx的语法)
下载：cnpm install babel-core babel-loader babel-preset-env babel-preset-react -S
配置：webpack.config.js
{
test: /\.(jsx|js)$/,
loader: "babel-loader",
options: {
presets: ["env", "react"]
},
exclude: /node_modules/ . //不包含统计的node_modules文件夹
},
在public中的js打包以后的代码中let 转换成 var
5.babel-loader 配置 v2版本
新增.babelrc文件和webpack.config.js同级
.babelrc
{
"presets":['env','react']
}
把webpack.config.js里边的options删除即可(推荐v2版本写法)
6.引入第三方库
在3.0时候需要配置，但4.0以后不需要配置
npm install jquery -S默认下载最新版本，也可以指定版本
npm install [email protected] -S
在js文件中需要引入，然后直接写jquery语法
import '../css/style.css';
import '../css/bootstrap.css';
import $ from 'jquery'
$("div").css("background-color","red")
let a = 10;
console.log(a)
模块化开发
https://www.jianshu.com/p/3832c00a44a7