初始化项目
1.创建工程文件夹
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文件夹 内部再创建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作为配置文件夹
- 创建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
// 正是环境就只是bsae64
cssModules: {
localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]',
camelCase: true //命名 转换。比如 。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. 加载前端需要使用的所有静态资源
//2.1 指定文件使用指定loader
rules: [
// { 因为我是用stylus 写css所以就不需要这个配置了
// test: /\.css$/,
// use: [
// 'style-loader',
// 'css-loader'
// ]
// },
// {
// test: /\.styl/,
// use: [
// 一层层解析成我们需要的css
// 不在这里写是因为需要优化 区分开发环境和正式环境
// '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/
// 忽略已经编译过的js
},
{
//直接把图片转换成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)
// 创建 .babelrc 转换vue里面的jsx代码
// 创建 postcss.config.js
.babelrc 识别vue内部的jsx代码
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx"
]
}
postcss.config.js 优化代码
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [
autoprefixer()
]
}
// 自动加前缀 优化代码 还有其他的自行百度
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')
// 环境变量的设置
const isDev = process.env.NODE_ENV === 'development'
// 要加入服务端渲染
// 所以 不加入base
//
const defaultPlugins = [
// 编译过程中判断 环境 开发环境 错误提示
// 正式环境打包所需的内容 提高程序的运行效率 而不是全部打包
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin()
]
//
const devServer = {
port: 5900,
host: '0.0.0.0', // 可以通过ip访问
overlay: {
// 编译过程出现错误 显示出来
errors: true
},
// historyFallback: {
// },
hot: true
}
let config
if (isDev) {
config = merge(baseConfig, {
// 帮助我们调试代码
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(
[ // 指定输出内容的名字
new ExtractPlugin('styles.[contentHash:8].css'),
// 单独打包类库代码
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
// webpack 相关代码打包到一个文件
// 新模块加入给新模块加一个id
// 规避长缓存问题
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
})
])
})
}
module.exports = config
// 1.1npm i webpack-dev-server
// 1.2npm i cross-env 设置环境变量 区分开发环境和正式环境
// 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"
}
网友评论