工作流程記錄：
1.初始化項目：npm init -y
2.安裝webpack,vue,vue-loader
npm install webpack vue vue-loader
3.按裝之后根據警告提示，安裝css-loader,vue-template-conpiler依賴包。
npm install css-loader vue-template-compiler
項目初始化基本完成。
一直遇到提示 install webpack-cli -D,即使安裝了也沒有用，索性直接刪除了，之后可以使用。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"build": "webpack --config webpack.config.js"
只有在這里面寫webpack他才會調用這里面的webpack,否則會調用全局的webpack,會導致很多版本不同出錯
},
4.新建webpack.config.js
const path = require("path");//nodejs中的基本包，處理路徑的
module.exports = {
entry: path.join(__dirname,"src/main.js"),//__dirname代表文件所在的目錄
output: {
filename: "bundle.js",
path: path.join(__dirname,"dist")
}
}
5.新建src文件，源代碼
src下新建app.vue
<template>
<div id="text">{{text}}</div>
</template>
<script>
export default {
data() {//數據
return {
text: "abc"
};
}
}
</script>
<style>
#text{color: red;}
</style>
src下新建main.js
import Vue from "vue";
import App from "./app.vue";//.vue文件
//分別導進來文件
//創建根文件
const root = document.creatElement("div");
document.body.appendChild(root);
new Vue({
render: (h) => h(App)//通過它掛載到html頁面中
}).$mount(root);//掛載到html頁面中
6.按需要添加loader
module.exports = {
entry: path.join(__dirname,"src/main.js"),//__dirname代表文件所在的目錄
output: {
filename: "bundle.js",
path: path.join(__dirname,"dist")
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test:/\.styl/,//stylus預處理
use: [
"style-loader",
"css-loader",
"stylus-loader"//專門處理stylus文件，處理完成之后讓css-loader處理css,扔給上一層處理，自己處理自己。比較方面，可以不用寫任意的括弧，標點符號。兼容css==== npm install stylus-loader stylus
]
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: "url-loader",//的安裝依賴file-loader
options: {
limit: 1024,//如果文件小於1024就會把圖片轉譯成base64的代碼
name: "[name]-aa.[ext]"//指定輸出的名字，[name].[ext],原來的名字.擴展名,-aa是自定義的=====之后把相應的loader安裝即可。
}
}
]
}
]
}
}
webpack做的事情就是把不同的靜態資源類型打包成一個js,在html中引用js，在html引用js即可。把零碎的js打包在一起減少http請求。使用模塊依賴，這樣積累，以后的項目可以復用。
7.在main.js中導入所需要的js,css,圖片等模塊。
import Vue from "vue";
import App from "./app.vue";//.vue文件
import "./assert/style/style.css";
import "./assert/img/123.jpg";
...
8.配置webpack-dev-server
安裝：
npm install webpack-dev-server
安裝之后在package.json中設置
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js"
}
在webpack.config.js中全局的配置。
module.exports = {
target: "web",//編譯目標是web平台
entry: "..."
}
//判斷那個環境
//安裝一個cross-env,不同的平台上運行的環境變量不一樣。
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",//windows: set NODE_ENV=production
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --config webpack.config.js"//解決熱跟新是保存頁面多次插入模板
在webpack.config.js中判斷：
const isDev = process.env.NODE_ENV === "development";//判斷是不是develment,在里面設置的環境變量都在process.env這個對象里
const config = {
target: "web",//編譯目標是web平台
entry: "..."
}
if(isDev) {
config.devServer = {//給config添加一個對象。server是webpack2.0
port: "8000",
host: "0.0.0.0",//可以通過localhost,127.0.0.1,訪問，也可以手機測試，其他本機內網也可以訪問。
overlay: {
errors: true,//編譯時出現錯誤顯示
},
//熱加載hot,需要webpack的HotModuleReplacementPlugin插件
hot: true//修改了一個組件的代碼，至渲染組件的數據，不會整個頁面刷新,安裝插件
},
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),//啟動這個插件，熱加載
new webpack.NoEmitOnErrorsPlugin()
),
config.devtool = "#cheap-module-eval-source-map"//映射編譯后的代碼,(.vue,es6代碼映射成瀏覽器識別的代碼)
}
module.exports = config;//整體的暴露出去
9.安裝html插件
html-webpack-plugin
webpack.config.js中全局引用：
const HTMLPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
//在config對象中添加
plugins: [
new webpack.DefinePlugin({//自身自帶的一個插件
"process.env": {//判斷是哪一個環境，開發環境還是生產環境
NODE_ENV:isDev ? " 'development' " : " 'production' "//判斷環境
}
}),
new HTMLPlugin();//new 就可以了
]
安裝postcss-loader autoprefixer babel-loader babel-core
安裝之后新建.babelrc,postcss.config.js
postcss.config.js:
const autoprefixer = require("autoprefixer");
module.exports = {
plugins: [
autoprefixer()
]
}
//后處理css,通過次組建處理css,處理瀏覽器前綴的等。
babelrc:
安裝babel-preset-env babel-plugin-transform-vue-jsx
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx"//專門轉化vue中的js
]
}
//如何使用jxs代碼的識別，
在插件中添加rules
{
test: /\.jsx$/,
loader: "babel-loader"
}
//需要在css-loader中添加一個對象
{
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},//stylus-loader會自動生成sourse map,postcss-loader也會自動生成，這樣前面的生成后后面的在不生成，使用效率會很好。使用效率會很好。
"stylus-loader"
}
.jsx文件
import "../.css";
export default {
data() {
return {
author: "intelwisd"
}
},
render() {
//可以使用一些js業務操作
return (//返回標簽
<div>{this.author}</div>
);
}
}
使用導入組件相同。
webpack正式環境打包的優化
把css單獨的打包出來，安裝extract-text-webpack-plugin
webpack.config.js:導入使用
const ExtractPlugin = require("extract-text-webpack-plugin");//非js打包成一個靜態文件，做瀏覽器緩存
//根據不同的環境去添加css
if(isDev) {//開發時使用styl
config.module.rules.push({
test: /\.styl/,
use:[
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
'stylus-loader'
]
});
}else{//線上時使用把css單獨打包成靜態文件
config.module.rules.push({
test: /\.styl/,
use: ExtractPlugin.extract({
fallback: "style-loader",
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
"stylus-loader"
]
})
}),
config.plugins.push(
new ExtractPlugin("styles.[contentHash:8].css")
),
config.output.filename = "[name].[chunkhash:8].js"
//接着處理filename
}
filename: "bundle.[hash:8].js"//默認的
vue-loader會根據每個組件里面的樣式顯示的時候才會顯示到頁面上，好處是使用組件異步加載的時候css跟着異步加載，會省很多流量。
單獨打包庫代碼以至於緩存
else{//線上環境
config.entry = {//entry路徑下添加打包的庫文件
app: path.join(__dirname,"src/index.js"),
vendor: ["vue","vue-router"]
},
config.plugin.push({//利用此插件
new webpack.optimize.CommonsChunkPlugin({
name: "vender"//庫文件打包成的名字
}),//這兩者是有順序的
new webpack.optimize.CommonsChunkPlugin({
name: "runtime"//webpack相關的文件打包到包度的文件中，好處：有新的模塊時，webpack會添加一個新的id上去，就會導致打包時hash發生變化，會阻止瀏覽器的長緩存。
})
})
}
hash和chunkhash
chunkhash: 在entry中生成的不同的節點,不然打都打包沒有意義。線上環境必須用chunkhash。
hash: 所有打包出來的模塊都是同一個哈希，整個應用的hash