webpack笔记

webpack笔记什么是webpackwebpack 文档webpack 3.12 常用命令依赖环境nodejs16不写配置文件通过配置文件进行打包使用第三方加载器loader进行打包使用插件plugin进行打包打包时让输出进度、输出内容带有颜色热部署热部署免刷新页面webpack 5 常用命令依赖环境nodejs16webpack5.72.0webpack-cli4.9.2不写配置文件通过配置文件进行打包使用第三方加载器loader进行打包以打包css为例常用loader处理样式资源什么是webpackwebpack是一个前端资源加载/打包工具它将根据模块之间的依赖关系进行静态分析然后将这些模块根据指定规则生成静态资源。比如将常规的浏览器能够识别的静态资源类文件html、js、css、jpg等、以及浏览器本身不能识别的文件模板文件hbs文件、CommonJS的cjs文件、样式文件sass、less文件转换并打包成几个独立的浏览器能正常识别的静态文件并且能够减少浏览器访问网站时的请求次数。webpack 文档中文文档https://webpack.docschina.org/concepts/webpack 3.12 常用命令依赖环境nodejs16不写配置文件在打包命令后指定参数webpack runoob1.js bundle.js通过配置文件进行打包webpack.config.jsmodule.exports { entry: ./runoob1.js, output: { path: __dirname, filename: bundle.js }, module: { loaders: [ { test: /\.css$/, loader: style-loader!css-loader } ] } }配置完毕之后执行打包命令webpack使用第三方加载器loader进行打包webpack本身只支持对js进行打包如果需要打包其他类型的文件比如css文件需要引入第三方loader。以下以css-loader、style-loader打包css文件为例子进行说明先安装loadernpm install css-loader0.28.11 style-loader0.23.1在被依赖的静态文件内部引入第三方模块require(!style-loader!css-loader!./style.css); document.write(require(./runoob2.js));打包的时候手动指定第三方模块该方法只兼容webpack1.x和2.x版本--module-bind cssstyle-loader!css-loader在webpack配置文件中指定编译选项module.exports { ... module: { loaders: [ { test: /\.css$/, loader: style-loader!css-loader } ] } }使用插件plugin进行打包插件用于完成一些 loader 不能完成的工作。以webpack内置的 BannerPlugin 插件为例子该插件用于在打包后的文件头部输出一些注释信息。在webpack.config.js里添加插件信息var webpackrequire(webpack); module.exports { ... plugins:[ new webpack.BannerPlugin(菜鸟教程 webpack 实例) ] }添加完成后再执行webpack命令打包后的bundle.js文件头部会多出一段注释信息打包时让输出进度、输出内容带有颜色webpack --colors --progress热部署修改后不用重新编译刷新页面即可看到最新内容。webpack --progress --colors --watch热部署免刷新页面webpack-dev-server兼容webpack3的webpack-dev-server版本号2.11.5webpack 5 常用命令依赖环境nodejs16webpack5.72.0webpack-cli4.9.2不写配置文件在打包命令后指定参数webpack ./src/main.js --modedevelopment通过配置文件进行打包webpack.config.js// Node.js的核心模块专门用来处理文件路径 const path require(path); module.exports { // 入口 // 相对路径和绝对路径都行 entry: ./src/main.js, // 输出 output: { // path: 文件输出目录必须是绝对路径 // path.resolve()方法返回一个绝对路径 // __dirname 当前文件的文件夹绝对路径 path: path.resolve(__dirname, dist), // filename: 输出文件名 filename: main.js, }, // 加载器 module: { rules: [], }, // 插件 plugins: [], // 模式 mode: development, // 开发模式 };配置后直接运行打包命令webpack即可无需指定额外打包参数使用第三方加载器loader进行打包以打包css为例在js代码中引入样式文件import ./css/index.css;在webpack配置文件中配置loadermodule: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: [style-loader, css-loader], }, ], },常用loader处理样式资源css-loader、style-loader、less-loader、sass-loader、stylus-loader