初始化項目
1.創(chuàng)建工程文件夾
2.npm init 初始化npm項目
3.安裝所需要的包
npm i webpack vue vue-loader
安裝后會有提醒更具提醒安裝依賴即可.
基于webpack3所需依賴（npm i css-loader vue-template-compiker）
4.新建文件夾client文件夾源碼放置的目錄
我的工程目錄.png
- 新建app.vue文件作為root文件
- 新建一個index.js作為工程的入口文件
- 新建assets文件夾 內(nèi)部再創(chuàng)建images和styles文件夾
里面可以放需要使用的圖片和css
//index.js
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render: (h) => h(App)
}).$mount(root)
5.新建一個build作為配置文件夾
- 創(chuàng)建3個文件
vue-loader.config.jsvue-loader的配置文件
webpack.config.base.js公共配置文件
webpack.config.client.js具體客戶端配置文件
5.1 配置 vue-loader.config.js
// const docsLoader = require.resolve('./doc-loader')
module.exports = (isDev) => {
return {
preserveWhitepace: true, // 去除空格
extractCSS: !isDev,
// 默認vue文件的css是不打包出來的，需要的話加true
// 正是環(huán)境就只是bsae64
cssModules: {
localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]',
camelCase: true //命名 轉(zhuǎn)換。比如 。class-header => classHeader
}
// 下面的基本不用
// hotReload:isDev //熱重載 是否開啟
// loaders: { //自定義模塊指定loader
// 'docs':docsLoader
// },
// preLoader:
// {
//解析完之前在解析
// },
// postLoader:{
//解析完之后
// }
}
}
5.2配置 webpack.config.base.js
const path = require('path')
const createVueLoaderoptions = require('./vue-loader.config')
const isDev = process.env.NODE_ENV === 'development'
const config = {
target: 'web',
//1.設置入口和出口
entry: path.join(__dirname, '../client/index.js'),
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, '../dist')
},
module: {
//2. 加載前端需要使用的所有靜態(tài)資源
//2.1 指定文件使用指定loader
rules: [
// { 因為我是用stylus 寫css所以就不需要這個配置了
// test: /\.css$/,
// use: [
// 'style-loader',
// 'css-loader'
// ]
// },
// {
// test: /\.styl/,
// use: [
// 一層層解析成我們需要的css
// 不在這里寫是因為需要優(yōu)化 區(qū)分開發(fā)環(huán)境和正式環(huán)境
// 'style-loader',
// 'css-loader',
// 'stylus-loader'
// ]
//}
{
test: /\.vue$/,
loader: 'vue-loader',
options: createVueLoaderoptions(isDev)
},
{
test: /\.jsx$/,
loader: 'babel-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
// 忽略已經(jīng)編譯過的js
},
{
//直接把圖片轉(zhuǎn)換成base64代碼 減少http請求
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: 'url-loader',
options: { //指定loader的操作方式
limit: 1024,
//指定輸出文件名字
name: 'resources/[path][name].[hash:8].[ext]'
}
}
]
}
]
}
}
module.exports = config
//`npm i style-loader url-loader file-loader`
//安裝后可以使用 import './assets/styles/global.styl' 進行//引入 放在index.js 的話表示全局引入
//`npm i stylus-loader stylus` 使用stylus寫css需要安裝
// npm i postcss-loader autoprefixer babel-loader balel-core
// npm i babel-preset-env babel-plugin-transform-vue-jsx
// (webpack3依賴 npm babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx)
// 創(chuàng)建 .babelrc 轉(zhuǎn)換vue里面的jsx代碼
// 創(chuàng)建 postcss.config.js
.babelrc 識別vue內(nèi)部的jsx代碼
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx"
]
}
postcss.config.js 優(yōu)化代碼
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [
autoprefixer()
]
}
// 自動加前綴 優(yōu)化代碼 還有其他的自行百度
5.3配置 webpack.config.client.js
const path = require('path')
const webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge') // 合并配置的插件
const ExtractPlugin = require('extract-text-webpack-plugin')
const baseConfig = require('./webpack.config.base')
// 環(huán)境變量的設置
const isDev = process.env.NODE_ENV === 'development'
// 要加入服務端渲染
// 所以 不加入base
//
const defaultPlugins = [
// 編譯過程中判斷 環(huán)境 開發(fā)環(huán)境 錯誤提示
// 正式環(huán)境打包所需的內(nèi)容 提高程序的運行效率 而不是全部打包
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin()
]
//
const devServer = {
port: 5900,
host: '0.0.0.0', // 可以通過ip訪問
overlay: {
// 編譯過程出現(xiàn)錯誤 顯示出來
errors: true
},
// historyFallback: {
// },
hot: true
}
let config
if (isDev) {
config = merge(baseConfig, {
// 幫助我們調(diào)試代碼
devtool: '#cheap-module-eval-source-map',
module: {
rules: [{
test: /\.styl/,
use: [
'vue-style-loader',
'css-loader',
// {
// loader: 'css-loader',
// options: {
// module:true,
// localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]'
// }
// },
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'stylus-loader'
]
}]
},
devServer,
plugins: defaultPlugins.concat([
// 2.1 啟動熱加載的插件
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
])
})
} else {
config = merge(baseConfig, {
entry: {
app: path.join(__dirname, '../client/index.js'),
vendor: ['vue']
// 單獨打包類庫
},
output: {
filename: '[name].[chunkhash:8].js'
},
module: {
rules: [{
test: /\.styl/,
use: ExtractPlugin.extract({
fallback: 'vue-style-loader', // 是把css用js代碼包裝 把css代碼到html里面
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'stylus-loader'
]
})
}]
},
plugins: defaultPlugins.concat(
[ // 指定輸出內(nèi)容的名字
new ExtractPlugin('styles.[contentHash:8].css'),
// 單獨打包類庫代碼
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
// webpack 相關(guān)代碼打包到一個文件
// 新模塊加入給新模塊加一個id
// 規(guī)避長緩存問題
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
})
])
})
}
module.exports = config
// 1.1npm i webpack-dev-server
// 1.2npm i cross-env 設置環(huán)境變量 區(qū)分開發(fā)環(huán)境和正式環(huán)境
// 1.3npm i html-webpack-plugin
// 1.4npm i vue-style-loader -D 處理熱更新的依賴
// npm i extract-text-webpack-plugin 把非js 代碼 打包成單獨文件
// 單獨打包類庫代碼
// chunkhash每一個異步加載的東西都會單獨生成一個hash
// hash所以打包js都是同一個hash
// npm webpack-merge 合并webpack的配置
//npm i rimraf -D 配置build過程刪除之前的dist文件
vue-loader自定義模塊 使用
<template>
<div></div>
</template>
<docs>
#123 = 456
<docs>
vue-loader 的cssModules功能使用
<template>
<header :class="$style.mainHeader">
<h1>JTodo</h1>
</header>
</template>
<style lang="stylus" module>
.main-header{
text-align center
h1{
font-size 100px
color: rgba(175, 47, 47, 0.4)
font-weight 100
margin 20px
}
}
</style>
外部引入的css 使用module jsx文件為例子
import className from '../assets/styles/footer.styl'
export default {
data () {
return {
author: 'Jokcy'
}
},
render () {
return (
// <div id="footer">
// <span>Written by {this.author}</span>
// </div>
<div id={className.footer}>
<span>Written by {this.author}</span>
</div>
)
}
}
npm 命令的配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
"build": "npm run clean && npm run build:client",
"clean": "rimraf dist"
}
