锡林浩特网站建设微信开发石家庄网站建设方案咨询
WebPack(静态模块打包工具)(webpack默认只识别js和json内容)
WebPack的作用
把静态模块内容压缩、整合、转译等（前端工程化）
1️⃣把less/sass转成css代码
2️⃣把ES6+降级成ES5
3️⃣支持多种模块文件类型，多种模块标准语法
export、export default、module.exports、exports
导出方法的区别：参考文章
WebPack的使用(WebPack支持ECMA语法)
//--save-dev 表示在开发环境中使用而不安装到全局
npm i webpack-cli --save-dev
在package.json中加入自定义命令build(自己定义的，一般都用build)
运行工具命令
npm run build
生成dist文件
生成的main.js为src目录下的压缩文件，运行打包好的文件如下
修改WebPack打包入口和出口
点击查看webpack文档
在根目录下创建webpack.config.js文件，进行修改配置
可以在出口中添加 clean:true 来清空dist重新创建打包资源
WebPack自动生成HTML
插件 html-webpack-plugin:在webpack打包时生成html文件
下载：
npm install --save-dev html-webpack-plugin
配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');module.exports = {entry: 'index.js',output: {path: path.resolve(__dirname, './dist'),filename: 'index_bundle.js',},plugins: [new HtmlWebpackPlugin()],//默认生成一个最简单的html5页面 //HtmlWebpackPlugin({template:path.join(_dirname,'文件路径')}) //以指定文件为模板
// plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') })]
};
webpack打包css模块
npm i css-loader style-loader --save-dev
module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"]}]}
打包less模块
//less-loader将less转为css，因为浏览器只认识cssmodule: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"]},{test: /\.less$/i,use: ["style-loader", "css-loader","less-loader"]}]}
打包图片
//type:‘asset’,根据文件大小（8kb）小于:把文件转成base64打包进js文件中（减少网络请求次数），大于：文件复制到输出的目录下
//在入口文件中引入图片
import img from './assets/logo.png'
babel编译器
WebPack开发服务器
还需要配置package.json文件，同时切换模式为开发者模式（不进行打包），自动监听入口文件的变化
运行服务器
npm run dev
//自动打开网页修改配置为"dev": "webpack server --open --mode=development"
打包模式
开发环境调错-source map
可以定位错误具体的位置而不是错误在压缩文件中的位置
注意：只在开发环境下使用
解析别名alias
在webpack.config.js中配置
在入口文件中使用别名时，入口文件会到webpack中通过别名找真正的路径
配置：
