webPack基本使用（2018/12/8）
webpack:
模块打包机
作用：
将浏览器不识别的语言转换成浏览器识别的一些语言 typescript scss
工作流程：
通过一个入口文件 找到这个入口文件所依赖的所有模块，将这些文件打包成一个或者多个文件
如何使用：
1、安装
cnpm install webpack@3.5.3 -g
2、局部安装 (在使用webpack的文件夹下局部安装)
a、初始化仓库 npm init -y
b、局部安装webpack
cnpm install webpack@3.5.3 --save-dev
3、创建一个文件 webpack.config.js //这是一个配置文件
path.join(参数1，参数2)
将参数1和参数2路径进行合并
webpack.config.js
const path = require("path") //引入path模块
const PATH = { //入口和出口文件的配置
app:path.join(__dirname,"./src/index.js"), //入口文件 __dirname是表示当前文件夹的绝对路径
build:path.join(__dirname,"./dist") //出口文件
}
module.exports={
entry:{
app1:PATH.app //表示入口文件的路径
},
output:{
filename:"[name].js", //这里表示的是通过入口文件将index.js进行打包之后生成的文件名称 [name]对应的是app1 也可以将名称写死 如 app.js
path:PATH.build //这是文件导出的路径
}
}
新建 src/index.js
index.js
console.log("111")
在文件路径下的cmd中 写 webpack 进行打包 这时候目录中会出现dist的文件夹，里面有刚才命名过的app1.js 文件
app1.js文件中会出现许多代码，都是webpack自动生成的配置项 /*0*/之后的代码是我们自己手写的代码
这张图表示的是第0个模块 如果还有别的模块会依次产生第一个模块第二个模块4、处理js使用的loader
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
5、处理css使用的loader
cnpm install --save-dev style-loader css-loader sass-loader node-sass
module.exports={
entry:{
app1:PATH.app //表示入口文件的路径
},
output:{
filename:"[name].js", //这里表示的是通过入口文件将index.js进行打包之后生成的文件名称 [name]对应的是app1 也可以将名称写死 如 app.js
path:PATH.build //这是文件导出的路径
},
module:{ //用于处理模块 js css img html
rules:[ //rules中存放模块，一个对象代表一个模块
{
test:/\.js$/, // 用于设定文件类型 以js结尾de文件
use:{
loader:"babel-loader",
options:{ //里面包含一个配置项
presets:["@babel/env","@babel/react"] //遇到ES6的代码 用env reatc代码 react
}
}
},
{
test:/\.(css|scss)$/,
/*从右至左 从下至上 */
use:["style-loader","css-loader","sass-loader"]
}
]
}
}
6、plugins 使用插件
cnpm install html-webpack-plugin --save-dev 作用可以帮我们生一个模版
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:{
app1:PATH.app //表示入口文件的路径
},
output:{
filename:"[name].js", //这里表示的是通过入口文件将index.js进行打包之后生成的文件名称 [name]对应的是app1 也可以将名称写死 如 app.js
path:PATH.build //这是文件导出的路径
},
module:{ //用于处理模块 js css img html
rules:[ //rules中存放模块，一个对象代表一个模块
{
test:/\.js$/, // 用于设定文件类型 以js结尾de文件
use:{
loader:"babel-loader",
options:{ //里面包含一个配置项
presets:["@babel/env","@babel/react"] //遇到ES6的代码 用env reatc代码 react
}
}
},
{
test:/\.(css|scss)$/,
/*从右至左 从下至上 */
use:["style-loader","css-loader","sass-loader"]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:"./index.html", //模板名称 需要手动创建html文件
filename:"index.html", //打包过后的文件名称
date:new Date(),
})
]
}
7、创建服务器 热更新
cnpm install webpack-dev-server@2 --save-dev
package.json
"scripts": {
"dev":"webpack-dev-server --open", //--open 是自动打开浏览器页面 可以不写
"test": "echo \"Error: no test specified\" && exit 1"
},
