vue+webpack实现一个todolist

一，webpack 的基本配置

地址:https://gitee.com/ling-xu/vue-webpack/tree/master/
分支：init

第一步：项目的初始化

安装vue和webpack

npm install webpack webpack-cli -D
npm install vue vue-loader
npm install css-loader

安装相关的依赖：

 npm install postcss

第二步：新建app.vue文件

但是，它作为vue的一个组件，它是没有办法直接显示在浏览器上的，所以还需要webpack

第三步：新建weback

const path =require('path')  //引入node.js中专门操作路径的模块
module.exports={
	entry: path.join(__dirname ,"./src/index.js"),//唯一入口文件
	output: {
	   path: path.join(__dirname ,"./dist"),//打包后的文件存放的路径
	   filename: "bundle.js"//打包后输出文件的文件名
	}
}

运行之后报错，因为vue-loader15.7版本时候使用webpack需要插件，具体设置如下：

于是最新的webpack设置：

const VueLoaderPlugin = require('vue-loader/lib/plugin'); //加这行
const path =require('path')  //引入node.js中专门操作路径的模块
module.exports={
	entry: path.join(__dirname ,"./src/index.js"),//唯一入口文件
	output: {
	   path: path.join(__dirname ,"./dist"),//打包后的文件存放的路径
	   filename: "bundle.js"//打包后输出文件的文件名
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    plugins:[
     	new VueLoaderPlugin()
    ]
}

运行成功后自然会生成dist文：

第四步：打包其他静态资源的webpack配置

既然写了这些loader，那么肯定是要安装一下的：

npm i style-loader url-loader file-loader

第五步：简单尝试css文件和图片的打包

第六步：打包css预处理器如stylus的配置

安装stylus

npm i stylus stylus-loader

第七步：webpack dev serve的安装和使用

这是在开发模式下使用的，可以让开发者体验到非常高效的开发模式。它是一个webpack的包，使用前需要先安装一下：

npm i webpack-dev-serve

安装跨平台的插件，让package打包配置在window和mac平台下都有效。

npm i cross-env

但是现在还没有html文件作为载体让这个项目运行起来，所以，还是需要创建一个html文件的。
在webpack里面有一个非常好用的组件：html-webpack-plugin

第八步：安装使用html-webpack-plugin

当我们使用vue这些框架的时候，还需要使用一个框架：webpack.DefinePlugin

第九步：webpack.DefinePlugin的使用

第十步：打包代码，用webpack-dev-server来打包

npm run dev

然后打开：

localhost:8000

就可以看到页面了：

想要运行后可以自动打开网页：

第十一步：现在是修改代码ctrl+s后页面自动刷新

现在我们想让他进行局部变更，也就是不进行刷新，需要以下操作

二，继续配置

第一步：git 上新建分支

第二步：安装需要的包

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

npm i babel-preset-env babel-plugin-transform-vue-jsx

第三步：新建对应文件

三，todolist的配置

新项目地址：
https://gitee.com/ling-xu/vue-webpack

四，webpack的完整配置：

const isDev=process.env.NODE_ENV ==='development' ; //判断是不是生产环境
const HTMLPlugin=require('html-webpack-plugin');  //导入HTMLPlugin
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //加这行是打包vue文件需要的，vue-loader的15.7版本之后需要这个
const path =require('path');  //引入node.js中专门操作路径的模块
const config={
    target:'web',  //开发环境，定义的目标是web平台
	entry: path.join(__dirname ,"./src/index.js"),//唯一入口文件
	output: {
	   path: path.join(__dirname ,"./dist"),//打包后的文件存放的路径
	   filename: "bundle.js"//打包后输出文件的文件名
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                use: 'vue-loader'
              },
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test: /\.jsx$/,
                use:['babel-loader']
            },
            {
                test:/\.styl$/,
                use:[
                    'style-loader',
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            sourceMap:true,
                        }
                    },
                    'stylus-loader'
                ]
            },  //处理stylus
			{
                test:/\.jpg|jpeg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use:[
                    {
                        loader:"url-loader",
                        options:  {
                            limit: 1024,  
                            //loader是可以配置一些选项的，用options把一些参数传递给url-loader指定它的操作方式
                            //url-loader可以转换我们的图片为base64代码直接写在js代码中。而不用生成一个新的文件
                            //可以有效减少http请求，于是小于1024的图片，就会被自动转化为base64的js代码
                            name:'[name]-aaa.[ext]', //设置输出的图片的名字为原来图片的名字
                            outputPath: 'images', // 该路径相对于html输出路径
                        }
                    }
                ]
            }  //处理图片
        ]
    },
    plugins:[
         new VueLoaderPlugin(),
         new HTMLPlugin(),   //使用HTMLPlugin，里面可以有很多配置
         new webpack.DefinePlugin({
             'process.env':{
                 NODE_ENV:isDev ? '"development"':'"production"'
             }
         }),  //这个东西的作用是在我们写js代码的时候也可以引用这个process.env从而判断是开发环境还是生产环境。
    ]
}
if(isDev){
    configdevtool='#cheap-module-eval-source-map',  //让代码变成更好看的代码
    config.devServer={
        port:8000,  //设置服务的端口
        host:'127.0.0.1',   //设置可以通过ip进行访问
        overlay:{
            error:true    //设置如果有打包错误，就会把错误反馈到网页上
        },
        open:true,   //设置true之后，运行npm  run dev就会自动打开http://127.0.0.1:8000/
        hot:true,
    },
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin()  //热加载
    )
}
module.exports=config