webpack学习
1、css-loader 模块化css文件,让webpack可以处理css文件,style-loader 在html 中插入style标签并把css代码插入到style标签中。写法是: style-loader!css_loader,有的需要加浏览器前缀,有时候需要处理css文件中import进来的css文件这个时候需要以如下方式写loader
1 2 3 4 5 6 7 | { test: /\.css$/, loader: 'style-loader!css-loader?importLoaders=1!postcss-loader' } |
备注:importLoaders=1用来处理在css中import样式文件[css]时不能转换兼容代码的问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { test: /\.less$/, loader: 'style!css!postcss!less' } { test: /\.scss$/, loader: 'style!css!postcss!sass' } |
2、chunkhash 只有在文件发生变化的时候才生产hash,hash 是文件打包的hash也就是说每打包一次都会生成一次hash,所以,文件名称引用时时候chunkhash,因为文件改变是才生产hash是很有用的。
3、htmlwebpackplugin 这个webpack插件可以在html中使用模板语言,重要的是可以改变已经产生hash的js链接
4、优化打包速度,可以在loader里面用exclude排除范围,exclude指定包含的范围。[include作用比exclude作用大]
5、path.resolve(__dirname, 'app/src')生成绝对路径,__dirname是当前脚本运行路径
6、图片文件如果要打包,且图片文件在src中,这个时候引入方式为
1 2 3 4 5 6 7 8 9 10 11 12 13 | <img src= "${require('../../assets/bg.png')}" ></img> { test: /\.(png|jpg|gif|svg)$/i, loaders: [ 'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]' , // 参数的意思是图片文件存在assets文件下且小于1000kb的就直接用base64转换成image:data 'image-webpack' // 压缩图片 ] } |
7、node中--save-dev 和 --save的写法区别
npm install vue-cli (安装vue-cli ) 有的时候有看到其它两种写法: --save-dev 和 --save的写法。这两个有一定的区别,我们都知道package.json 中有一个 “dependencies” 和 “devDependencies” 的。dependencies 是用在开发完上线模式的,就是有些东西你上线以后还需要依赖的,比如juqery , 我们这里的vue 和 babel-runtime(Babel 转码器 可以将ES6 转为ES5 ), 而devDependencies 则是在开发模式执行的,比如我们如果需要安装一个node-sass 等等。有的时候看到package.json中安装的模块版本号前面有一个波浪线。例如: ~1.2.3 这里表示安装1.2.x以上版本。但是不安装1.3以上。
详细信息见 http://www.cnblogs.com/PeunZhang/p/5553574.html#npm-install
备注:注意一个细节问题,使用 npm install x -S 或者 npm install x --save 安装的插件会在package.json文件中的depedencies 字段中出现 相应的依赖,这就意味着打包之后的文件中包含这些文件,因为这些依赖是生产环境的依赖,而 npm install x --D 或者 npm install x --save-dev 安装的插件会在package.json 文件中的devDependencies 中出现相应的依赖,这些依赖在打包的时候不会被打包到静态文件中。 所以安装插件时注意一下生产环境和开发环境的插件安装方式
8、devmiddleware 将编译之后的文件都放到内存中,适用于开发环境使用
9、hotmiddleware 热更新修改之后的文件
10、打包编译成功之后浏览器更新,这段代码需要在每次更新之后打包更新页面内容
client.js
1 2 3 4 5 6 7 8 9 | /* eslint-disable */ require( 'eventsource-polyfill' ) var hotClient = require( 'webpack-hot-middleware/client?noInfo=true&reload=true' ) hotClient.subscribe( function (event) { if (event.action === 'reload' ) { window.location.reload() } }) |
dev-server.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | var express = require( 'express' ) var app = express() var path = require( 'path' ) var webpack = require( 'webpack' ) var webpackConfig = require( './webpack.config.js' ) var opn = require( 'opn' ) Object.keys(webpackConfig.entry).forEach( function (name) { webpackConfig.entry[name] = [ './dev-client' ].concat(webpackConfig.entry[name]) }) var compiler = webpack(webpackConfig) var devMiddleware = require( 'webpack-dev-middleware' )(compiler, { publicPath: '/' , quiet: true }) var hotMiddleware = require( 'webpack-hot-middleware' )(compiler, { log: () => {} }) compiler.plugin( 'compilation' , function (compilation) { compilation.plugin( 'html-webpack-plugin-after-emit' , function (data, cb) { hotMiddleware.publish({ action: 'reload' }) cb() }) }) var staticPath = path.posix.join( '/' , 'src' ) app.use(staticPath, express. static ( './src' )) app.use(express. static ( 'dist' )) // app.get('/', function (req, res) { // // res.sendFile(__dirname+'/index.html'); // }) app.use(require( 'connect-history-api-fallback' )()) app.use(devMiddleware) app.use(hotMiddleware) var _resolve var readyPromise = new Promise(resolve => { _resolve = resolve }) app.listen(3033, () => { console.log(`listen at http: //localhost:3033`) opn( 'http://localhost:3033' ) _resolve() }) devMiddleware.waitUntilValid( function () { console.log( '> Listening at 3033\n' ) }) module.exports = { ready: readyPromise, close: () => { server.close() } } |
webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | let webpack = require( 'webpack' ) var path = require( 'path' ) var htmlwebpackplugin = require( 'html-webpack-plugin' ) var FriendlyErrorsPlugin = require( 'friendly-errors-webpack-plugin' ) module.exports = { entry: {app: './src/main.js' }, output: { path: path.resolve(__dirname, './dist' ), filename: 'js/[name]-[hash].js' }, module: { loaders: [{ test: /\.js$/, loader: 'babel-loader' , include: path.resolve(__dirname, 'src' ), exclude: path.resolve(__dirname, 'node_modules' ), }, { test: /\.vue$/, loader: 'vue-loader' , include: path.resolve(__dirname, 'src' ), exclude: path.resolve(__dirname, 'node_modules' ) }, { test: /\.js$/, loader: 'babel-loader' , include: path.resolve(__dirname, 'src' ), exclude: path.resolve(__dirname, 'node_modules' ) }, { test: /\.less$/, include: '/src' , loader: 'style!css!postcss!less' , include: path.resolve(__dirname, 'src' ), exclude: path.resolve(__dirname, 'node_modules' ) }] }, // cheap-module-eval-source-map is faster for development devtool: '#cheap-module-eval-source-map' , plugins: [ // ... new webpack.DefinePlugin({ 'process.env' : { NODE_ENV: '"development"' // production } }), new htmlwebpackplugin({ // filename: '[name]-[hash].html', filename: 'index.html' , template: 'index.html' , inject: true }), new webpack.HotModuleReplacementPlugin(), // 热替换,也就是更新的地方会被替换,没有更新的地方不会替换 new webpack.NoEmitOnErrorsPlugin(), new FriendlyErrorsPlugin() // 控制台热替换 ] } |
11、css module
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)