webpack初学配置

1.安装webpack

npm i webpack webpack-cli

2.初步使用

package.json 里更改设置

"script"
"dev":"webpack"

3.webpack.config.js文件

const path =require('path')
module.exports={
	mode:'development',// development开发 production 产品
	entry:path.join(__dirname,'./index.js')// 需要打包的文件
	output{
		path:path.join(__dirname,'./list')
        filename:'handle.js'
	}
}

4.手动压缩

npm run dev

5.自动更新

• 安装 webpack-dev-server
• 更改package.json

"script"
"dev":"webpack serve"

• 运行npm run dev

6.安装 html-webpack-plugin

• 更改webpack.config.js

const HtmlPlugin=require('html-webpack-plugin')
const htmlPlugin=new HtmlPlugin({
	template:'./index.html',
	filename:'./index.html'
})
module.exports={
	mode:'development',
	entry:path.join(__dirname,'./src/index.js'),
	plugins:[htmlPlugin],
	output:{
    	path:path.join(__dirname,'./dist'),
    	filename:'bundle.js'
    }
}

• 运行npm run dev
• 插件作用：自动注入内存里的脚本
• 自动打开

module.exports={
	devServer:{
    	open:true,
    	host:'127.0.0.1',
    	port:'8086'
    }
}

7. CSS文件处理

• webpack不能处理非js文件，需要引入其他loader处理
• 处理其他文件时，需要查看webpack.config.js里module.rules数组是否添加了对应的loader npm i style-loader css-loader -D

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

• 从后往前依次处理，最后导入hundle.js,一起打包

8.less文件处理

• 添加less-loader 和less npm i less-loader less -D

module:{
	rules:[
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}

9.图片文件处理

• 添加url-loader file-loader npm i url-loader file-loader -D

module:{
	rules:[
      {test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'}
    ]
}

10.高级JS文件处理

• 添加 babel-loader、babel/core、babel/plugin-proposal-decorators

npm i babel-loader babel/core babel/plugin-proposal-decorators

• 项目根目录中配置babel.config.js文件

module.exports={
	plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

• 修改webpack.config.js

modul:{
	rules:[
      {test:/\.js$/,use:'babel-loader,exclude:/node_modules/}
    ]
}

webpack发布

配置build命令

• package.json 的script下新增build命令

"build":"webpack --mode productin"

• 发布的时候运行build命令，不是dev了，压缩的文件也相应的放到了磁盘上

sourcemap

开发环境下

• 看得到行数和源码

devtool:'eval-source-map'

生产环境下

-只看到行数，看不到源码

devtool:'nosources-source-map'