webpack vue css独立,webpack初步搭建Vue项目

对文件进行打包

1. cnpm i -D webpack webpack-cli

本地热更新

1. cnpm i -D webpack-dev-server

处理图片资源

url-loader依赖file-loader

1. cnpm i -D url-loader file-loader

处理css文件

1. cnpm i -D css-loader style-loader

css预处理器

1. cnpm i -D stylus stylus-loader

2. cnpm i -D postcss-loader

预处理器工具

1. cnpm i -D autoprefixer

处理html文件

1. cnpm i -D html-webpack-plugin

处理js文件

兼容es6写法

1. cnpm i -D babel-core babel-preset-env babel-loader

处理vue文件

1. cnpm i -D vue vue-loader vue-style-loader vue-template-loader

处理vue中使用jsx文件

If using Babel 7, use 4.x

If using Babel 6, use 3.x

cnpm i -D

babel-plugin-syntax-jsx

babel-plugin-transform-vue-jsx

babel-helper-vue-jsx-merge-props

babel-preset-env

处理package.json跨平台传变量问题

cnpm i -D cross-env

webpack配置

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

const HTMLPlugin = require('html-webpack-plugin')

const webpack = require('webpack')

const isDev = process.env.NODE_ENV === 'development';

module.exports = {

target:"web",

mode:isDev ? 'development' : 'production',

devtool:"#cheap-module-eval-source-map",

devServer:isDev === 'development' ? {

port:8080,

contentBase:path.join(__dirname,'dist'),

host:'0.0.0.0',

overlay:{

errors:true

},

hot:true

} : {},

entry:path.join(__dirname,'src/index.js'),

output:{

filename:'bundle.js',

path:path.join(__dirname,'dist')

},

module:{

rules:[

{

test:/\.vue$/,

use:{

loader:'vue-loader'

}

},

{

test:/\.jsx$/,

use:{

loader:'babel-loader'

}

},

{

test:/\.css$/,

use:[

'style-loader',

'vue-style-loader',

'css-loader'

]

},

{

test:/\.styl/,

use:[

'style-loader',

'css-loader',

'postcss-loader',

'stylus-loader'

]

},

{

test:/\.(gif|jpg|jpeg|png|svg)/,

use:{

loader:'url-loader',

options:{

limit:1024,

name:'[name].[ext]'

}

}

}

]

},

plugins: [

new VueLoaderPlugin(),

new HTMLPlugin({

filename:'index.html',

template:'index.html'

}),

new webpack.NamedModulesPlugin(),

new webpack.HotModuleReplacementPlugin()

]

}

单独配置jsx,postcss

//.babelrc

{

"presets":[

"env"

],

"plugins":[

"transform-vue-jsx"

]

}

//postcss.config.js

const autoprefixer = require('autoprefixer')

module.exports = {

plugins:[

autoprefixer()

]

}

更多专业前端知识，请上

【猿2048】www.mk2048.com