Webpack新人初认识及使用、部分代码配置解释

Webpack：
1.全局安装webpack：cnpm install webpack webpack-cli -g
2.创建文件夹：Mkdir demo1 -> mkdir src
3.包的初始化：npm init -y
4.安装webpack的依赖：npm install webpack webpack-cli -save-dev
(可以看到package.json添加了 “devDependencies”: {
“webpack”: “^4.44.0”,
“webpack-cli”: “^3.3.12”)
5.打包index.js文件到dist中：
Webpack ./src/index.js -o ./dist/bundle.js --mode=development //开发者模式（注释多，文件较大一点点）
Webpack ./src/index.js -o ./dist/bundle_production.js --mode=production //生产者模式
（webpack默认可以处理js文件、json文件；生产环境下比开发环境多了压缩代码和代码混淆）
6.用配置的命令完成打包，一些打包需要预编译，下载一些解析器等
（配置一下打包的对象）
let path = require(‘path’)//通过node的path模块获取当前的目录
console.log(path.resolve(__dirname,‘dist’))
module.exports = {
//入口文件
entry:"./src/index.js",//配置一下入口文件
output:{
//输出文件名称
filename:“bundle.js”,
//输出的路径
//绝对路径
path:path.resolve(__dirname,‘dist’)//获取当前的目录是什么目录
},
mode:‘development’//开发模式 （也可以生产模式production）

}

然后在命令行输入webpack打包.

7 webpack里面的loader：
Loader 用于对模块的源代码进行转换。可以使我们在import或者load模块时预处理文件。Loader甚至允许你直接在JavaScript模块中import CSS文件。

webpack默认不允许引入CSS文件

Webpackconfig.json：
let path = require(‘path’)//通过node的path模块获取当前的目录
console.log(path.resolve(__dirname,‘dist’))
module.exports = {
//入口文件
entry:"./src/index.js",//配置一下入口文件
output:{
//输出文件名称
filename:“bundle.js”,
//输出的路径
//绝对路径
path:path.resolve(__dirname,‘dist’)//获取当前的目录是什么目录
},
mode:‘development’//开发模式 （也可以生产模式production）
//loader的配置
module:{
//对某个格式的文件进行转换处理
reles:[
test:/.css$/, //正则表达式，匹配到css文件
use:[
//use数组里中的loader的顺序，是从下到上，逆序执行
//将js的样式内容插入到style标签里
‘style-loader’,
//将css文件转换为js
‘css-loader’

		]
	]
}

}

接下来下载解析器：
npm install style-loader css-loader --save-dev

最后打包编译：webpack

过程经常出错原因：css-loader style-loader需要对应正确的webpack版本，需要
npm uninstall webpack
然后在npm install webpack就可以安装了loader了。

8通过插件自动打包html文件 ，css文件。
let path = require(‘path’)//通过node的path模块获取当前的目录
//安装html-webpack-plugin. cnpm install html-webpack-plugin
let HtmlwebpackPlugin = require(‘html-webpack-plugin’);
console.log(path.resolve(__dirname,‘dist’))
module.exports = {
//入口文件
entry:"./src/index.js",//配置一下入口文件
output:{
//输出文件名称
filename:“bundle.js”,
//输出的路径
//绝对路径
path:path.resolve(__dirname,‘dist’)//获取当前的目录是什么目录
},
mode:‘development’,//开发模式 （也可以生产模式production）
//loader的配置
module:{
//对某个格式的文件进行转换处理
rules:[
{
test:/.css$/,//正则表达式，匹配到css文件
use:[
//use数组里中的loader的顺序，是从下到上，逆序执行
//将js的样式内容插入到style标签里
“style-loader”,
//将css文件转换为js
‘css-loader’
]
}
]
},
//plugin插件配置
plugins:[
new HtmlwebpackPlugin({
template:’./src/index.html’
})
]

}

接着npm install html-webpack-pluging --save-dev
再接着npm install
最后webpack。

9图片打包。也要在module里面进行图片解析。
{ //配置图片文件
test:/.(jpg|png|gif)$/,
Loader:’url-loader’,
//图片小于8kb，base64处理，减少请求数量，会使得体积更大
options:{limit:8*1024,

//url-loader 的es6模块化解析
esModule:false,
//[hash:10]获取图片hash的前10位
//[ext]获取图片的扩展名
name:’[hash:10].[ext].’}，
{ test:/.html$/, loader:’html-loader’}

接着下载解析器
Npm install url-loader html-loader --save-dev
Npm install
Npm file-loader
Webpack

10模块代码热更新：

指代码更够实时更新效果，代码输入后能够自动编译解析。

第一步：再webpack.config配置：
devServer:{
//项目构建路径
contentBase:path.resolve(__dirname,”dist”),
//启动编码的压缩
Compress:true,
//端口号
Post：3000，
//自动打开浏览器
Open:true
}

第二部：npm install webpack-dev-server -g
第三步：webpack-dev-server
安装依赖：第四步：npm install
第五步：修改index.html 可以看到网页实现实时更新