webpack构建工具已经火了好几年,也是当下狠火狠方便的构建工具,我们没有理由不去学习。既然选择webpack就要跟着时代走,我们要追随大牛的步伐,大牛等等我。
一、webpack基础
- 在根目录使用npm init 命令创建package.json,创建过程中一路回车。
- 本地安装webpack命令:npm install webpack webpack-cli --save-dev 安装成功后写入package.js的devDependencies中,可以通过 npm node_modules/.bin/webpack -v 命令查看它的版本。
- 全局安装npm install -g webpack 不推荐全局安装 webpack。它会把你的项目锁定全局安装的版本,也可能导致不同的webpack版本中构建失败。
静态资源文件目录
- "color: #ff0000">二、webpack.config.js
const webpack = require('webpack'); module.exports = { mote:"development",//指当前的环境 /* development:开发环境 production:生产环境 none:不做任何处理 */ //入口文件,如果需求多个入口可改为对象 entry: './src/index.js', /* hot配置是否启用模块的热替换功能,devServer的默认行为是在发现代码被改后通过自动刷新整个页面来做到事实预览,然后设置hot后, 会在不刷新整个页面的情况下用新模块替换老模块来做到实时更新。 如果选用hot:true方式来达到热更新的效果需要引用webpack.HotModuleReplacementPlugin插件配合达到你需要的效果,另外推荐一 种简便的方式在package.json中scripts设置如下 "scripts": { "start": "webpack-dev-server --hot --inline", }, */ // 服务器环境 devServer: { hot: true, //建议使用第二种方案 启动服务使用命令 npm run start port:"8080",//端口默认8080,可以自行设置 host:"192.168.xx.xx", /* host配置devServer服务监听的地址,也可以使用localhost进行访问 浏览器输入192.168.xx.xx/index.html 简便方法在package.json中设置如下 "scripts": { "start": "webpack-dev-server --hot --inline ", }, */ }, //插件 plugins: [ //热加载插件 new webpack.HotModuleReplacementPlugin(), ], //输出 output: { //filename:输出的文件名,可以自定义一些规则 filename: '[name].bundle.js', //path,配置输出文件存放在本地的目录 path: path.resolve(__dirname, 'dist') } };
三、插件
1、HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin') plugins: [ new HtmlWebpackPlugin({ // 打包输出HTML title: 'Hello World',//文件的标题 minify: { //minify 的作用是对 html 文件进行压缩 removeComments: true, // 移除HTML中的注释 collapseWhitespace: true, // 删除空白符与换行符 minifyCSS: true, // //是否压缩html里的css 默认值false; caseSensitive: true, //是否对大小写敏感,默认false ollapseWhitespace: true, //是否去除空格,默认false minifyJS: true, //是否压缩html里的js removeAttributeQuotes: true, //是否移除属性的引号 默认false removeComments: true, //是否移除注释 默认false emoveCommentsFromCDATA: true, //从脚本和样式删除的注释 默认false emoveEmptyAttributes: true, //是否删除空属性,默认false removeRedundantAttributes: true, //删除多余的属性 removeScriptTypeAttributes: true, //删除script的类型属性,在h5下面script的type默认值:text/javascript 默认值false }, filename: 'index.html', //输出的html的文件名称 template: 'index.html', //html模板在的文件路径 hash: true,//hash作用是给生成的js文件一个独特的hash值,默认值为false 被构建过后的html引用js效果如下 // <script type=text/javascript src=bundle.js"htmlcode">
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); plugins: [ //该插件主要用于自动删除webpack里dist目录中已不需要的文件 new CleanWebpackPlugin() ]
官方介绍:
By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild
3、ExtractTextWebpackPlugin
先把我们需要的东西下载好
npm install webpack css-loader style-loader extract-text-webpack-plugin --save-dev
首先配置webpack,先不使用插件完成
module.exports = { module : { rules: [ { test: /\.css$/, use:[ { loader: "style-loader" }, { loader: "css-loader" } ] } ] } }
配置好之后在js入口文件中引入样式文件,打包查看打包结果bundle.js,会发现css被打包到了js里面,以字符串的形式存在。如果index.html中已引入打包后的bundle.js,使用浏览器打开index.html文件会发现css以style的形式被插到了head当中。
2.使用插件
const path = require('path'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { module : { rules: [ { test: /\.css$/, use : ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } /* use: 指需要什么样的loader去编译文件 fallback: 编译后用什么loader来提取css文件 */ ] }, plugins: [ new ExtractTextPlugin("styles.css"), new HtmlWebpackPlugin({ // 关于HtmlWebpackPlugin上文有提到 title: 'extract-text-webpack-plugin', filename: 'index.html', template: path.resolve(__dirname, 'index.html'), inject : 'head' }) ] }
以上内容配置好之后打包查看,可以发现css文件以link的方式被引在index.html的head中。期间配合HtmlWebpackPlugin插件自动插入index.html中
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]