Vue+Webpack打造todo应用

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组件：

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没有报错表示安装配置成功了。