-
4、 npm i html-webpack-plugin
查看全部 -
3 npm i cross-env
查看全部 -
第二步：
package.json中
"dev": "webpack-dev-server --config webpack.config.js"
查看全部 -
使用webpack-dev-server
查看全部 -
const path = require("path");
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
entry: path.join(__dirname, "src/index.js"),
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist"),
},
module: {
rules: [{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.css$/,
use:
["style-loader","css-loader"]
}, {
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 1024,
name:'[name]-aaa.[ext]'
}
}
]
}]
},
plugins: [
new VueLoaderPlugin()
]
}
查看全部 -
hash与chunkhash的区别:
hash是整个项目的哈希，只有一个
chunkhash是分类打包会生成不一样的hash
目的：为了让非业务代码可以在浏览器内实现长缓存。
查看全部 -
postcss-loder 处理编译好的css：
autoprefixer 为不同浏览器的css加前缀
查看全部 -
webpack-dev-server 用于开发环境
cross-env 为了适配mac与windows不同平台配置环境的脚本一致
查看全部 -
如何在jsx里面写循环
<div id="footer">
{
[1,2,3].map((a) => {
return <div>{a}</div>
})
}
<span>{this.author} CODEING</span>
</div>
查看全部 -
header.vue
查看全部 -
npm i babel-preset-env babel-plugin-transform-vue-jsx
查看全部 -
npm i postcss-loader autoprefixer babel-loader
查看全部 -
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: 'url-loader?limit=1024&name=[path][name].[ext]'
// [{
// loader: 'url-loader',
// option: {
// limit: 1024,
// name: '[name].[ext]'
// }
// }]
}
webpack.config.js配置项应该这么写，视频里的写法在npm run build的时候会报错
查看全部 -
js 代码格式化插件：Beautify
查看全部 -
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-syntax-jsx": "^6.18.0",
查看全部
举报