-
webpack4 不需要 使用 webpack.DefinePlugin定义 process.env.NODE_ENV
使用--mode参数配置即可
查看全部 -
npm i post-css-loader autoprefixer babel-loader babel-core
查看全部 -
2019.07.12
由于版本问题，报错的同学请将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: 'bundle.js',
path: path.join(__dirname, 'dist')
},
plugins: [
new VueLoaderPlugin()
],
module: {
rules:[
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
}
}
查看全部 -
npm init初始化项目，默认配置，自动生成package.json
cnpm i webpack vue vue-loader/cnpm i css-loader vue-template-compiler
在package.json中添加"build": "webpack --config webpack.config.js";添加webpack.config.js并配置
cnpm run build报错，修改如下：
添加const {VueLoaderPlugin}=require('vue-loader');
module.export={...,plugins:[new VueLoaderPlugin()]...}
添加module.export={...,module:{rules:[{test:/.vue$/,loader:'vue-loader'},{test:/.css$/,use:['vue-style-loader','css-loader']}]}}
cnpm run build提示：需安装webpack-cli，通过cnpm i --save-dev webpack-cli@3.3.0进行安装
cnpm run build警告：the 'mode' option has not been set,webpack will fallback to 'production' for this value....修改package.json中"build": "webpack --config webpack.config.js"为"build": "webpack --mode development"
cnpm run build正确
查看全部 -
为什么要把第三方类库和业务逻辑代码分离打包？
如果把业务逻辑代码和第三类库打包到一起，整个类库代码就需要随着业务代码的更新而更新，这样类库代码就不能在浏览器里进行缓存。为了尽可能的使用浏览器缓存来减少服务器流量，以及用户加载速度更快，所以单独拆分出来进行打包
查看全部 -
vue工程的搭建
npm init
1、npm i webpack vue vue-loader
2、npm i css-loader vue-template-compiler
3、新建src目录并在src下新建app.vue
4、在app.vue中编写vue组件
5、在根目录下新建webpack.config.js
查看全部 -
项目搭建文档
代码中具体细节都有详细注释
1.vue+webpack项目工程配置
npm init 初始化一个npm项目
npm i webpack@3.10.0 vue@2.5.13 vue-loader@13.6.0 安装webpack和vue,使用vue要安装vue-loader
npm i css-loader@0.28.7 vue-template-compiler@2.5.13 根据终端WARN提示安装css-loader,因为vue-loader依赖css-loader //针对各版本做了详细指定,由于更新过快,避免版本差异性问题,故指定了版本在app.vue中书写基本的vue结构
首先在webpack.config.js设置入口entry
声明我们的入口文件index.js示例中app.vue实际是一个组件,组件是不能直接挂载到我们的html中去,需要在index.js中挂载
webpack.config.js同样设置出口文件bundle.js及存放路径
配置完后,在webpack.config.js中配置build脚本, --config 指定我们的config文件 因为在这里面写,当你调用时才会调用这个项目里面的webpack,否则将会调用全局的webpack,全局webpack和项目中的版本可能存在差异,建议使用这种方式会好一点
webpack对其他类型的文件处理,可在配置文件中配置rules规则. 同样根据配置中的处理的loader都要安装. npm i style-loader@0.19.1 url-loader@0.6.2 file-loader@1.1.6
stylus的css预处理器 npm i stylus-loader@3.0.1 stylus@0.54.5 同理其他的像sass,less等其他的预处理器都可以类似的方法去使用
查看全部 -
css文件抽取分离 npm i extract-text-webpack-plugin
但是webpack4中已经无法使用extract-text-webpack-plugin。
这里对应的地方，可以修改成
npm install --save-dev mini-css-extract-plugin
和
config.module.rules.push({ test: /\.styl/, use: [ { loader: MiniCssExtractPlugin.loader, options: {publicPath: '../'} }, 'css-loader', { loader: 'postcss-loader', options: {sourceMap: true} }, 'stylus-loader' ] } )和
config.plugins.push(new MiniCssExtractPlugin({filename: 'style.[contentHash:8].css'}))查看全部 -
jsx的export default里，
data()下的return跟的是花括号，
render()下的return跟的是圆括号。
哦，真的是要被自己蠢哭了。
查看全部 -
hash与chunkhash的区别:
hash是整个项目的哈希，只有一个
chunkhash是分类打包会生成不一样的hash
目的：为了让非业务代码可以在浏览器内实现长缓存。
查看全部 -
如何在jsx里面写循环
<div id="footer">
{
[1,2,3].map((a) => {
return <div>{a}</div>
})
}
<span>{this.author} CODEING</span>
</div>
查看全部 -
hot:true//热加载；
historyApiFallback:true;//返回;
open:true//每次编辑都打开新网页
查看全部 -
一、npm i postcss-loader autoprefixer babel-loader babel-core
二、postcss帮我们后处理css，autoprefixer：需要为浏览器加前缀属性的， babel：演示如何使用render，vue可以写jsx代码
三、npm i babel-preset-env babel-plugin-transform-vue-jsx
四、npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx
查看全部 -
const path = require("path");
module.exports = {
"entry": path.join(__dirname, "src/index.js"),
"output": {
filename: "bundle.js",
path: path.join(__dirname, "dist"),
},
mode: "development",
module: {
rules:[{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js$/,
loader: "babel-loader"
},
{
test: /\.css$/,
use:[
"style-loader",
"css-loader"
]
},
{
test: /\.styl$/,
use: [
"style-loader",
'css-loader',
"stylus-loader"
]
},
{
test: /\.(jpg|png|gif|svg|jpeg)$/,
use:[
{
loader: "url-loader",
options:{
limit: 1024,
name:'[name]-aaa.[ext]'
}
}
]
}
]
}
}
查看全部 -
在packag.json中设置build：防止调用全局的webpack，而只引自己文件里面的。版本不同，先测试！ 此课程录制于2017-12-21查看全部
举报