繼續上篇 https://www.cnblogs.com/chenyingying0/p/12790111.html
修改webpack.config.js
// 打包前端資源 const path = require('path') const VueLoaderPlugin = require("vue-loader/lib/plugin"); module.exports = { entry: path.join(__dirname, "src/index.js"), output: { filename: "boundle.js", path: path.join(__dirname, "dist"), }, module: { rules: [ { test: /\.vue$/, loader: "vue-loader", }, { test: /\.css$/, use:[ 'css-loader', 'style-loader' ] },{ test:/\.(gif|jpg|jpeg|png|svg)$/, use:[ { loader:'url-loader', options:{ limit: 1024,// 小于1024的轉base64格式 name:'[name]-cyy.[ext]' } } ] } ], }, plugins: [ // 請確保引入這個插件！ new VueLoaderPlugin(), ], };
安裝style-loader, url-loader, file-loader (url-loader依賴于file-loader)
cnpm i style-loader url-loader file-loader
運行npm run build進行打包
出現報錯
ERROR in ./src/styles/test.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(1:1) Unknown word
原因是style-loader必須在css-loader的前面，修改webpack.config.js
再次運行npm run build進行打包，成功
dist目錄里多出現了logo-cyy.jpg檔案，并且boundle.js應該也是有更新的
配置css前處理器stylus演示
安裝stylus-loader(依賴于stylus）
cnpm i stylus-loader stylus
npm run build打包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/104008.html
標籤：JavaScript
上一篇：淺談Promise
下一篇：JS中的new運算子