vue-cli与webpack(实现todolist)

不用vue-cli脚手架，利用webpack纯手工搭建简单vue-cli

1. 初始化项目，安装依赖

初始化项目，生成package.json文件： npm init -y
安装依赖：npm i webpack vue vue-loader 


警告：vue-loader@15.9.6 requires a peer of css-loader@* but none is installed。
解析：vue-loader 需要一个依赖(peer)但是没有安装。有这种警告的直接依次安装，直到没有这种警告

警告：ssrlearn@1.0.0 No description 或 ssrlearn@1.0.0 No repository field
解析：这种不用理他

2. 创建src目录，创建app.vue文件作为主vue文件 (此时vue文件无法在浏览器运行)
3. src目录下，创建app.vue对应的 index.js 入口文件 （导入vue文件，因为webpack打包文件的入口都是js文件）

import Vue from 'vue'
// js入口文件中，导入唯一vue入口文件
import App from './app.vue'

// 创建一个div节点，加入到document。用于挂载vue文件
const root = document.createElement('div')
document.body.appendChild(root)

// 创建vue对象
new Vue({
    // 通过vue的h参数，将app.vue渲染到html上
    render: (h) => h(App)
    // $mount 指定app.vue在html中要挂载的位置
}).$mount(root)

4. 创建webpack.config.js文件，打包前端资源。以js文件为入口

// path用于处理路径，是nodejs的基本包
const path = require('path')
module.exports = {
    // 入口文件
    // __dirname该文件所在的目录，join方法拼接上路径成为绝对路径
    entry: path.join(__dirname, 'src/index.js'),
    // 出口文件
    // 文件名bundle.js,路径该文件所在目录下的dist目录
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    }
}

5. 在package.json中加入webpack打包命令。因为在这里才会调用node_modules中的webpack而不是全局webpack

"scripts": {
    "build":"webpack --config webpack.config.js"
}

6. npm run build 运行打包。
   报错：You may need an appropriate loader to handle this file type，报错原因：需要一个loader处理对应的vue文件，因为webpack只认识js，其他loader报错同理。解决：在webpack中加入 loader

module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader'
    }]
}

7. npm run build 还是报错。
   报错：vue-loader was used without the corresponding plugin。报错原因：需要一个插件处理vue-loader。解决。在webpack中加入 VueLoaderPlugin

 const {VueLoaderPlugin} = require('vue-loader')
 plugins: [new VueLoaderPlugin()],

8. 其他loader使用

	module: {	
		rules: [{
			//用于处理.vue结尾的文件
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
        	//用于处理.css结尾的文件
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
        	//用于处理.gif.jpg.jpeg.png.svg结尾的图片
            test: /\.(gif|jpg|jpeg|png|svg)$/,
            //这种loader才是最完善的，以上都有简写配置的意思
            use: [{
                // url-loader依赖file-loader，所以还需要安装file-loader
                loader: 'url-loader',
                options: {
                    limit: 1024,
                    // 输入的名字.ext
                    name:'[name].[ext]'
                }
            }]
        },{
        	//用于处理styl预编译器。与sass与less雷同
            test: /\.styl/,
            use: ['style-loader', 'css-loader', 'stylus-loader']
        }]
   }
注意：以上loader都要npm安装

9. webpack-dev-server 。用于开发环境运行，监听端口号，开发环境跨域

先安装 npm i webpack-dev-server
再添加命令
 "scripts": {
    "dev": "webpack-dev-server --config webpack.config.js"
  }

10. cross-env 。用于linux或window系统都能用一个命令（不加这个window跟linux下列两行命令会有区别）
    修改命令：区分运行环境与开发环境

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

11. webpack中判断是开发环境还是生产环境。用于区分环境设置devServer，开发环境的调试

const config = {entry:xxx....}
// 判断是生产环境还是开发环境
const isDev = process.env.NODE_ENV === 'development'
if (isDev) {
    config.devServer = {
        // 监听的端口号
        port: '8000',
        //0.0.0.0这样设置可以通过localhost访问也可以通过ip访问
        host: '0.0.0.0',
        // 如果有任何错误，让他显示在网页上
        overlay: {
            errors: true
        }
    }
}
module.exports = config

12. html-webpack-plugin。将js、vue等文件绑定在html上。

先安装插件 npm i html-webpack-plugin
再添加进webpack配置插件项中 
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[new HtmlWebpackPlugin ()]

13. DefinePlugin。用于将vue源码区分，开发环境有很多vue源码生产环境中是不需要的。

先导入webpack
const webpack = require('webpack')
plugins:[new webpack.DefinePlugin({
        'process.env': {
            NODE_DEV: isDev ? '"development"' : '"production"'
        }
}] 

14. 运行命令 npm run dev
    报错：Cannot find module ‘webpack-cli/bin/config-yargs’。
    报错原因：之前的webpack-cli版本太高了，指定一个webpack@3.3就好了

"webpack": "^5.23.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"

15. npm run dev 。发现代码如期成功。并且此时并不需要public中的index.html。因为在index.js中自己创建了一个div，加入到了html中。
16. webpack-dev-server 其他开发环境配置简单介绍

open:true   运行命令自动打开浏览器 
hot:true    组件更新不会更新整个页面 需要配合以下两个插件使用 ---
            new webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin()

vue的jsx写法和postcss

1. 运行命令安装依赖

 npm i postcss-loader autoprefixer babel-loader babel-core
 

2. 创建postcss.config.js文件

const autoprefixer = require('autoprefixer')
module.exports = {
    plugins: [autoprefixer()]  //此插件用于css自动加浏览器内核前缀
}

3. 创建.babelrc文件

{
    "presets": ["env"],
    "plugins": ["transform-vue-jsx"]
}
运行命令：npm i babel-preset-env babel-plugin-transform-vue-jsx

4. 在webpack.config.js文件中添加 jsx 对应loader。并且预编译器要加入postcss-loader

 		{
            test: /\.jsx$/,
            loader: 'babel-loader'
        },{
            test: /\.styl/,
            use: ['style-loader', 
                'css-loader',
                //加上options避免sourceMap多次加载，降低开发效率
                {loader:'postcss-loader',options:{sourceMap:true}},
                'stylus-loader']
        }

5. jsx后缀文件的使用。以vue为对比，style部分直接import导入；template标签部分写在render方法中；script部分不变

import '../assets/styles/footer.css'
export default {
    // 其他js模块还是依旧
    data() {
        return {
            author: "liu",
        };
    },
    // jsx中template部分写在render方法
    render() {
        return (
            <div id="footer">
                <span>write by mr.{this.author}</span>
            </div>
        )
    }
}

打包优化

1. 生产环境将css单独分离打包