一 npm init 初始化项目
ps:npm init 的方式初始化项目而不是采用脚手架的方式
1 创建项目
1.1安装依赖
npm init
cnpm i webacpk vue vue-loader //vue需要依赖vue-loader
cnpm i css-loader vue-template-compiler文件夹如下：
app.vue代码
<template>
<div id="app">
123
</div>
</template>
<script>
</script>
<style scoped>
#app {
color:red
}
</style>index.js代码
import Vue from 'vue' // app.vue依赖vue源码
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root); // root 节点需要创建
new Vue({
render: (h) => h(App) // h 是vue中的createApp
}).$mount(root) //$mount把我们的app 挂载到我们的html的root节点下webpack.config.js代码
const path = require('path')
const config = {
entry: path.join(__dirname, 'src/index.js'), //入口 拼接绝对路劲 + src
output: {
filename: 'bundle.[hash:8].js', // 开发环境和正式环境输出的filename是不同的
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/, // .需要通过\转义
loader: 'vue-loader' // 自动加载模块功能
}
]
},
}webpack.config.js代码
{
"name": "create_196",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"注释": "不在这里声明，就会调用全局的webpack",
"build": "webpack --config webpack.config.js",
"注释": "dev 是开发环境",
"dev1": "webpack-dev-server --config webpack.config.js",
},
}
ps:若遇到以下这样报错，需要配置loader,因为webpack默认只能解析js文件，vue文件webpack不能解析需要配置loader
1.2 webpack配置加载项目于中各种资源
webpack能加载我们前端项目用的所有资源。各种静态资源，图片，css，css预处理（tets.styl）等
安装的所有依赖及版本放置文章最后面，放在文章最后面，可以先安装
module: {
rules: [
{
test: /\.vue$/, // .需要通过\转义
loader: 'vue-loader' // 自动加载模块功能
},
{
test: /\.jsx$/,
loader: 'babel-loader'
},
{ // .css文件
test: /\.css$/, // .需要通过\转义
// loader: 'css-loader' // 只是处理了css文件
use: [
'style-loader', // 写入到html中，插入到html中<style link='test.css'></style>
'css-loader', // 只是读取了css文件
]
},
{
// test: /\.styl$/, // 这样配置会有个错误Module parse failed: Unexpected character '#'，使用下面配置处理
test: /.styl(us)?$/,
use: [
'style-loader',
'css-loader',
'stylus-loader' //先执行stylus-loader解析后为css 然后再通过css-loader读取css webpack的loader 就是一层一层的往上传递
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/, //
use: [
{ //这里为何要有{}，因为每个loader都可以配置的 options:{}
loader: 'url-loader', // 直接以base64的格式写入js中，减少http请求，依赖于file-loader
options: { // url-loader配置
limit: 1024,
name: '[name]-aaa.[ext]' //ext扩展名，输出的图片名字
}
}
]
},
]
},1.3 webpack-dev-server 启动一个服务
webpack-dev-server及热更新：
//方便调试，因为通过webpack编译后都是编译后的代码不利于调试，故需配置devtool，在浏览器中就是我们写的代码，source-map模式有很多（行定位准确）
config.devtool = '#cheap-module-eval-source-map'
// devServer会启动一个服务，服务会监听一个端口
config.devServer = {
port: 8000,
host: '0.0.0.0', // 不设置成loachost的好处 0.0.0.0可以通过localhost:8080/访问,127.0.0.1也能访问 ，通过电脑ip访问在别人电脑访问及手机，设置成localhost他人电脑无法访问
overlay: {
errors: true // 编译过程中报错信息 会输出在网页中，我们可以快速改掉报错的地方
},
// open: true, //自动打开浏览器。每次修改都会重新打开页面
// historyFallback: { }//开发的是单应用 定义路由将很多webpack不认识的地址映射到index.html入口上
hot: true //只更新修改组件页面，不用重新刷新浏览器
}
config.plugins.push( // 热更新所需配置
new webpack.HotModuleReplacementPlugin(), // hot热加载需要的插件
new webpack.NoEmitOnErrorsPlugin() //可以减少错误信息的展示
)cross-env：是一套命令能在mac和windows上使用，mac和windows设置环境变量语法不同 ,通过NODE_ENV2=123 ,都存在process.env这个对象里面
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development NODE_ENV2=123 webpack-dev-server --config webpack.config.js"html-webpack-plugin： 是提供一个入口类似index.html，自动把所需的js及图片资源引入到html中
const HTMLPlugin = require('html-webpack-plugin'); //dev-server需要的
plugins: [
//new webpack.DefinePlugin是 vue react使用这些框架开发必加的一个plugin
// 作用是 1.webpack在编译的过程中以及在我们自己在js中判断环境 都可以调用NODE_ENV这个变量
// 2.这些框架打包时会通过不同的环境会去区分打包 很多不同版本的vue源代码，开发环境中时比较大体积的版本
// 因为里面内置了很多错误信息提示，我们在生产环境是不需要的会加大代码体积以及降低运行效率
new webpack.DefinePlugin({ // 这个插件在webpacK上需引入webpacK
'process.env': {
NODE_ENV: 'isDev' ? '"development"' : '"production"'
}
}),
new VueLoaderPlugin(),
// 一个html容纳bundle.js
new HTMLPlugin()
]ps:若遇到以下这样报错，1.删除 node_modules 目录 2.npm cache clean --force (清除掉cache缓存) 3.npm install
1.4.postcss-loader autoprefixer(加浏览器前缀)，babel-loader(让vue写jsx语法)
postcss.config.js配置如下：
const autoprefixer = require('autoprefixer')
// 后处理，我们的css代码通过style-loader css-loader 处理后需要css代码优化 如自动加前缀-webkit等
module.exports = {
pluginss: [
autoprefixer()
]
}.babelrc
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx"
]
}footer.jsx
export default {
data() {
return {
author: "cookie",
list: [1, 2],
};
},
render() {
return (
<div id="footer">
<span>jsx 语法 {this.author}</span>
</div>
);
},
};2.npm run build需要注意的点
2.1.抽离css做浏览器缓存
打包出来的bundle.js还包含了css文件，明显不有利于我们做浏览器缓存，需要抽离css文件，打包成单独的文件
// 单独分离css
const ExtractPlugin = require('extract-text-webpack-plugin')
config.module.rules.push({
// test: /\.styl$/, // 这样配置会有个错误Module parse failed: Unexpected character '#'，使用下面配置处理
test: /.styl(us)?$/,
use: ExtractPlugin.extract({
fallback: 'style-loader', // 把css-loader的代码包一层js代码,这个一层js代码是写入到我们html当中的
use: [
'css-loader',
{
loader: 'postcss-loader', // 添加postcss.config.js , webkit前缀
options: {
souerMap: true, // 可直接使用前面的souerMap，提高编译效率
}
},
'stylus-loader' //stylus-loader解析后是css webpack的loader 就是一层一层的往上传递
]
})
})
config.plugins.push(
new ExtractPlugin('styles.[contentHash:8].css'), // 指定输入的文件名，根据css内容输出的name值
)2.2 抽离类库 vue源码打包，及webpack配置单独抽离
ps:为什么要把第三方类库和业务逻辑代码分离打包？
如果把业务逻辑代码和第三类库打包到一起，整个类库代码就需要随着业务代码的更新而更新，这样类库代码就不能在浏览器里进行缓存。为了尽可能的使用浏览器缓存来减少服务器流量，以及用户加载速度更快，所以单独拆分出来进行打包
ps:为什么要把webpack配置单独抽离？
webpack配置单独打包在一个文件中，在有新的模块加入时，webpack会给每个模块加个id上去，会导致hash发生变化，这样我们的浏览器缓存就失效了，webpack配置单独打包成一个文件 好处是预防这种问题发生，保证浏览器长缓存
config.entry = {
entry: path.join(__dirname, 'src/index.js'),
// vendor: ['vue', 'vue-router', 'vuex'] // 定义需打包类库的name
vendor: ['vue']
}
config.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
'name': 'vendor' // vendor必须与上面定义的字段相同，注意点vendor一定要放在runtime前面
}),
new webpack.optimize.CommonsChunkPlugin({
'name': 'runtime' //注意顺序一定要写在后面 把在dist/entry.js 里面的webpack配置单独打包在一个文件中，在有新的模块加入时，webpack会给每个模块加个id上去，会导致hash发生变化，这样我们的浏览器缓存就失效了，webpack配置单独打包成一个文件 好处是预防这种问题发生，保证浏览器长缓存
}),
)2.3 正式环境必须使用chunkhash
如果我们声明chunk （vendor:['vue“]）还使用hash那就没什么意义了，因为我们每次打包业务代码的时候 我们的类库也会跟着改变，就做不到浏览器缓存
使用chunkhash与hash的区别，chunkhash就是声明不同节点entry的chunkhash,hash是整个应用的hash,很明显我们只有一个应用（都使用hash会导致hash值一样）
源码链接：https://gitee.com/zhangcookie/wbpack3_vue_todo-list.git
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
