Webpack 打包 - 7.webpack 开发环境配置
1.文件结构
2. iconfont.css
@font-face {font-family: "iconfont"; src: url('../media/iconfont.eot?t=1581833245354'); /* IE9 */ src: url('../media/iconfont.eot?t=1581833245354#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO0AAsAAAAACFwAAANlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqDaIM0ATYCJAMUCwwABCAFhG0HWhtSBxHVm8PIfhzGMck6c2bkTSjPG/sePF+69P3d1UUnhRgUQqyA5BBPz9SlMjBVQJUnnZ0EgFmbnT6jIgzdMR78N0/ZUHpuv/3PMeOtBfPb1iBTzAoK2hvgKIFms6qLCLI7kBP1G8auvIibIYBDX0Yji5as2oSNwdgkgJw6fnQ/dsqIqakUbIRAyYkGeY6FrR6oVOCZ//tSz0SxQWFpjFutO7L4EF7VpKpF2v/v79I+/nh2gJ0GGhgNGJALpc5T6DA5Go2jzDd4gIONQo01bWaVV7Xo//9YuiO1Y/7DA0GhMSABjPLWAHgoZaBqkk2FQNVMKhRUeVRoqFokfjG3sQBwgHbAYyABaQePmRtAoYOtDXzQPKybsYNdjTn6Jzsk51GWn7klN3dTXt7mgoKt+fnbLF3f1wEvObPPi9w9uYWb8oo2F5SUnVZ85UOoH/YoIiT8XBtpjZ08atpabuKrnYdfMP5Xt92j72IdaEPrK7QVhw6yY+4m7agtsw8flfcFS+PyBuBKfv5s18BR7fS2trrdPlec//38zRtMpuH/Fsr27bKQ5/Kdpjg37F3bwtqpU22eLw1zz4W1a25tFpg8l4eaeDGTVeWbSVNxY8+5vudH4mHnVczD8/el+Xl/O9pFIoFf378iAg8mUyTzrBn4y5aV1dQ2eU3OzLKpU7jx+o21bNm6dbbO8oyYrDt1ah2SCeVB2Rt8UuSbeXu9/t6NiEgvkouAvTpSVcL/Su3r/gA+CsQ+o2D/yfvdhXV7283+a7sGgOIzLX1g8H+loV/KRkFr0W8VtewwqsQwWUZutYVyyGI8P02plD4H+JnejpSPo+7SOg6CnRIxULSiD2hsBiMMZjRYuEyGADbzwGEUS0936cQFNGKCwEjuABDa8xsUbYkATXvSEAZTBhZdaYQA7UWDwxbpdEGXoWJOfqGhIXpp/zJ1x66WhT6ovGF4r40lJT7hBQtTRLI4zWZq7LAx9oTPkJMqascmFbgd1vWQ044ZHeORPMsk0bJvirtjc56Fhobopf3L1B27ur3pcz9/w/BeG6tpq3C+YGGaXLI4bYGolXurtmt5TfgMOamidmxSATtWM3nIWb5sRsd47BE/ywR107bKeH719ozHAAdjsSVKtBixJEDw5EMREW5LGHZklCt3FM4BAAAA') format('woff2'), url('../media/iconfont.woff?t=1581833245354') format('woff'), url('../media/iconfont.ttf?t=1581833245354') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('../media/iconfont.svg?t=1581833245354#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-icon-test:before { content: "\e633"; } .icon-icon-test1:before { content: "\e63a"; } .icon-icon-test2:before { content: "\e640"; } .icon-icon-test3:before { content: "\e644"; }
index.less
#box { width: 200px; height: 200px; background-image: url('../imgs/angular.jpg'); background-repeat: no-repeat; background-size: 100% 100%; }
index.js
// 引入 import '../css/iconfont.css'; import '../css/index.less'; function add(x, y) { return x + y; } console.log(add(1, 2));
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>开发环境配置</title> </head> <body> <h1>开发环境配置</h1> <span class="iconfont icon-icon-test"></span> <span class="iconfont icon-icon-test2"></span> <span class="iconfont icon-icon-test3"></span> <span class="iconfont icon-icon-test1"></span> <div id="box"></div> <img src="./imgs/vue.jpg" alt="vue"> <img src="./imgs/react.png" alt="react"> </body> </html>
webpack.config.js
/* 开发环境配置:能让代码运行 运行项目指令: webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包,没有输出 */ const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ // loader的配置 { // 处理less资源 test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { // 处理css资源 test: /\.css$/, use: ['style-loader', 'css-loader'] }, { // 处理图片资源 test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', // 关闭es6模块化 esModule: false, outputPath: 'imgs' } }, { // 处理html中img资源 test: /\.html$/, loader: 'html-loader' }, { // 处理其他资源 exclude: /\.(html|js|css|less|jpg|png|gif)$/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media' } } ] }, plugins: [ // plugins的配置 new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development', devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true } };
执行打包命令:
$ webpack
生成文件:
打开index.html
end~