Module parse failed: Unexpected character '#’报错解决:
将webpack.config.js的css预处理器修改为下面这种形式。
// css预处理器
{
test:/\.styl(us)?$/,
use:[
'style-loader',
'css-loader',
{
loader:'postcss-loader',
options:{
sourcemap:true
}
},
'stylus-loader'
]
},
基础配置
1 初始化npm。
2 安装webpack webpack-cli vue vue-loader css-loader style-loader vue-template-compiler 。修改package.json文件：
{
"name": "webpack_server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules/.bin/webpack --config webpack.config.js",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1",
"vue": "^2.5.21",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
}
}
3 书写vue组件：
<template>
<div id="test">{{text}}</div>
</template>
<script>
export default {
data() {
return {
text:'abc'
}
}
}
</script>
<style>
#test{
background-color: aquamarine;
}
</style>
4 创建入口文件(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 创建webpack.config.js：
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode:'development',
entry:path.join(__dirname,'src/index.js'),
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
// css预处理器（需要安装stylus-loader）
{
test:/\.styl$/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
},
//添加读取css格式的规则
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
//添加读取图片格式的规则，在这里要安装url-loader和file-loader的。
{
test:/\.(gir|jpg|jpeg|png|svg)$/,
use:[
{
loader:'url-loader',
options:{
limit:1024,
// ext扩展名
name:'[name].[ext]'
}
}
]
}
]
},
plugins:[
new VueLoaderPlugin()
]
};
6 现在已经可以在index.js里面引入css和图片文件了。
import Vue from 'vue'
import App from './app.vue'
import './assets/style/index.css'
import './assets/img/bg.jpg'
const root = document.createElement('div');
document.body.appendChild(root);
new Vue({
render:(h) => h(App)
}).$mount(root);
webpack-dev-server使用：
1 安装cross-env，设置环境变量，根据环境变量来判断是开发模式还是生产环境（在package.json里的script配置dev，build）：
{
"name": "webpack-dev-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production node_modules/.bin/webpack-dev-server",
"dev":"cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1",
"vue": "^2.5.21",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
}
}
2 安装html-webpack-plugin，并在webpack.config.js中使用。
3 npm run dev （显示i ｢wdm｣: Compiled successfully.表示编译成功）
vue的jsx写法及postcss
1 安装相关文件npm install postcss-loader autoprefixer babel-loader babel-core -D
2 创建postcss.config.js和.babelrc（配置文件）
postcss.config.js:
const autoprefixer = require('autoprefixer');
module.exports = {
plugins:[
//该方法可以帮助我们后处理css，做到兼容不同浏览器。
autoprefixer()
]
};
.babelrc:
{
"presets":[
"env"
],
"plugins":[
"transform-vue-jsx"
]
}
3 安装对应库：（babel-preset-env ）（babel-plugin-transform-vue-jsx）
npm install babel-preset-env babel-plugin-transform-vue-jsx -D
4 在webpack.config.js配置：
{
test:/\.jsx$/,
loader:'babel-loader'
},
// css预处理器
{
test:/\.styl$/,
use:[
'style-loader',
'css-loader',
{
loader:'postcss-loader',
options:{
sourcemap:true
}
},
'stylus-loader'
]
},
5 安装之后会提示安装两个库：
- babel-helper-vue-jsx-merge-props
- @babel/core
安装好就可以了
6 npm run dev没有报错表示安装配置成功了。
