手动搭建webpack + vue + loader

一、安装配置环境

1.1、首先确定已经安装node.js

没有安装node.js可以去node.js官网下载并安装（http://nodejs.cn/）。非常简单，这里不再赘述。

1.2、安装webpack

1. windows+R 输入cmd打开控制台，进入D盘（命令 d:）

2. mkdir webpack-test // 新建一个文件夹目录

3. cd webpack-test //进入目录中

4. npm init //初始化项目

5. npm install [email protected] --save-dev //在文件夹下装webpack（npm命令可选择用cnpm淘宝镜像，此处webpack安装版本为3.10.0）

6. npm install [email protected] --save-dev //2.5.13版本

7. npm install [email protected] --save-dev //13.7.2版本

扫描二维码关注公众号，回复： 3064131 查看本文章

8. npm install css-loader vue-template-compiler --save-dev （统一vue和vue-template-compiler的版本）

9. atom ./ //在编辑器打开当前目录（此处为atom编辑器）

10. npm install style-loader url-loader file-loader --save-dev

11. npm install --save-dev babel-loader babel-core //安装支持ES6语法转换

12. npm install stylus --save-dev 安装stylus（css预处理器，操作css较方便）

13. npm install stylus-loader --save-dev

1.3、project

1.3.1.vue文件结构：

<template>
</template>

<script>
</script>

<style>
</style>

1.3.2简单的目录结构：

index.html
main.js 入口文件
App.vue vue文件
package.json 工程文件（项目依赖，名称,配置）
- npm init –yes生成
webpack.config.js webpack配置文件
- webpack.config.js配置

module.exports={
    //入口文件
    entry:'./main.js',
    //出口文件
    output:{
        //当前路径
        path:__dirname,
        filename:'build.js'
    }
};

1.3、webpack-dev-server

1. npm install [email protected] --save-dev

webpack.config.js配置：

"dev":"webpack-dev-server --config webpack.config.js"

2. npm install cross-env

#设置环境变量标识是开发环境还是生产环境或其他(这里设置两个不同的变量)

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

webpack.config.js配置：

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

module.exports = 改为 const config =

if(isDev){
  config.devServer = {
    port:8000,
    host:'0.0.0.0',
    overlay:{
      errors:true,
    }
  }
}
module.exports = config

3. npm install html-webpack-plugin --save-dev

装载html文件

webpack.config.js配置：

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

plugins:[
    new webpack.DefinePlugin({    //判断环境
      'process.env':{
        NODE_ENV:isDev ?'"development"' :'"production"'
      }
    })
    new HTMLWebpackPlugin()
  ]

运行npm run dev //打包

package.json文件配置：

{
  "name": "vue-ssr-tech",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js --colors",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.0.1",
    "vue": "^2.5.13",
    "vue-loader": "^13.6.0",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

webpack.config.js文件配置：

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

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

const config = {                                 //module.exports
  target:'web',
  entry : path.join(__dirname,'src/index.js'),  //入口文件
  output : {                                    //出口文件
    filename : 'bundle.js',
    path : path.join(__dirname,'dist')
  },
  module:{
    rules:[
      {
        test:/\.vue$/,
        use:'vue-loader'
      },
      {
        test:/\.js$/,
        use:'babel-loader',
        include:path.resolve(__dirname +'./src/'),  //绝对路径
        exclude:path.resolve(__dirname +'node_modules')   //打包过后无需再打包
      },
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.styl/,                          //css预处理器
        use:['style-loader','css-loader','stylus-loader']
      },
      {
        test:/\.(png|gif|jpg|jpeg|svg)$/,
        use:[
          {
            loader:'url-loader',
            options:{limit:1024,name:'[name]_[hash:5].[ext]'}
          }
        ]
      }
    ]
  },
  plugins:[
    new webpack.DefinePlugin({  //判断环境
      'process.env':{
        NODE_ENV:isDev ?'"development"' :'"production"'
      }
    }),
    new HTMLWebpackPlugin()
  ]
}

if(isDev){
  config.devtool ='#cheap-module-eval-soure-map' //帮助调试错误,soure-map映射文件
  config.devServer = {
    port:8000,
    host:'0.0.0.0',
    overlay:{
      errors:true,
    },
    hot:true,  //当修改部分组件只重新加载这部分，而不是整个页面重新加载
    // historyFallback:{  单页应用 不匹配的路由，没有影射的地址都指定到某页面访问映射
    //
    // }
    //open:true,  //打包胡自动打开浏览器
  }
  //热加载
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
}

module.exports = config

二、vue介绍和项目实战

2.1

数据绑定

vue文件开发方式

render方法

2.2 API重点

生命周期方法

computed

1. npm install [email protected] [email protected] --save-dev

新建postcss.config.js文件配置：

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins :[
    autoprefixer()
  ]
}

2. npm i babel-preset-env babel-plugin-transform-vue-jsx --save-dev

3. npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx --save-dev ([email protected],[email protected])

{
        test:/\.jsx$/,
        use:"babel-loader"
      },

{
        test:/\.styl/,                          //css预处理器
        use:[
          'style-loader',
          'css-loader',
          {
            loader:'postcss-loader',
            options:{
              sourceMap:true,    //stylus-loader可以生成sourceMap，postcss-loader也可以生成sourceMap，此设置可省略postcss-loader生成的
            }
          },
          'stylus-loader'
        ]
      },

新建.babelrc文件配置：

{
  "presets":["env"],
  "plugins":[
    "transform-vue-jsx"
  ]
}

npm run dev //运行

2.3 项目

template下只能有一个子节点

2.4 项目完成后，webpack配置css单独分离打包

npm i extract-text-webpack-plugin

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ExtractPlugin = require('extract-text-webpack-plugin')

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

const config = {
  target:'web',
  entry:path.join(__dirname,'src/index.js'),
  output:{
    filename:'bundle.[hash:8].js',
    path:path.join(__dirname,'dist')
  },
  module:{
    rules:[
      {
        test:/\.vue$/,
        loader:'vue-loader'
      },
      {
        test:/\.js$/,
        use:'babel-loader',
        include:path.resolve(__dirname +'./src/'),  //绝对路径
        exclude:path.resolve(__dirname +'node_modules')   //打包过后无需再打包
      },
      //jsx是vue2才出来的，因为它相对于.vue写模板的方式，灵活性更高，可以更方便使用js的原生方法
      {
        test:/\.jsx$/,
        use:"babel-loader"
      },
      // {
      //   test:/\.css$/,
      //   use:[
      //     'style-loader',
      //     'css-loader'
      //   ]
      // },
      {
        test:/\.(jpg|png|gif|jpeg|svg)$/,
        use:[
          {
            loader:'url-loader',
            options:{limit:1024,name:'[name]-[hash:8].[ext]'}
          }
        ]
      }
    ]
  },
  plugins:[
    //new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env':{
        NODE_ENV: isDev ? '"development"' :'"production"'
      }
    }),
    new HTMLWebpackPlugin()
  ]
}


if(isDev){
  config.module.rules.push({
    test:/\.styl(us)?$/,
    use:[
      'style-loader',
      'css-loader',
      {
        loader:'postcss-loader',
        options:{
          sourceMap:true, //stylus-loader可以生成sourceMap，postcss-loader也可以生成sourceMap，此设置可省略postcss-loader生成的
        }
      },
      'stylus-loader'
    ]
  })
  config.devtool = '#cheap-module-eval-source-map'
  config.devServer = {
    port: 8000,
    host:'0.0.0.0',
    overlay:{
      error:true,
    },
    hot:true
  }
  //热加载
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
}else{
  //生产环境
  config.entry = {
    app:path.join(__dirname,'src/index.js'),
    vendor:['vue']  //单独打包vue
  }
  config.output.filename = '[name].[chunkhash:8].js'
  config.module.rules.push({
    test:/\.styl(us)?$/,      //css预处理器
    use:ExtractPlugin.extract({
      fallback:'style-loader',
      use:[
        'css-loader',
        {
          loader:'postcss-loader',
          options:{
            sourceMap:true, //stylus-loader可以生成sourceMap，postcss-loader也可以生成sourceMap，此设置可省略postcss-loader生成的
          }
        },
        'stylus-loader'
      ]
    })
  })
  config.plugins.push(
    new ExtractPlugin('styles.[contentHash:8].css'),
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor'
    }),
    //单独打包webpack文件
    new webpack.optimize.CommonsChunkPlugin({
      name:'runtime'
    })
  )
}

module.exports = config

npm i rimraf -D //每次打包前清空dist目录

"clean":"rimraf dist"

手动搭建webpack + vue + loader

猜你喜欢