成都电子商城网站开发,成都网站设计 常凡云,wordpress购物主题多大,长沙大型网站设计公司WebPack(静态模块打包工具)(webpack默认只识别js和json内容) WebPack的作用
把静态模块内容压缩、整合、转译等#xff08;前端工程化#xff09; 1️⃣把less/sass转成css代码 2️⃣把ES6降级成ES5 3️⃣支持多种模块文件类型#xff0c;多种模块标准语法
export、export…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-devmodule: {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.pngbabel编译器 WebPack开发服务器 还需要配置package.json文件同时切换模式为开发者模式不进行打包自动监听入口文件的变化
运行服务器
npm run dev
//自动打开网页修改配置为dev: webpack server --open --modedevelopment打包模式 开发环境调错-source map
可以定位错误具体的位置而不是错误在压缩文件中的位置 注意只在开发环境下使用
解析别名alias
在webpack.config.js中配置 在入口文件中使用别名时入口文件会到webpack中通过别名找真正的路径 配置
