Vue + Webpack Initialization-李状的博客

Vue + Webpack Initialization

Use Webpack Initialization vue project process:

Create project directory:

src
| |-- assest
| |   |-- images

| |       |-- ***.png ***.jpg

| |   |-- styles

| |      |-- ***.css ***.stylus.styl

| |-- app.vue
| |-- index.js
package.json
webpack.config.js

Initialization project, output package.json：
```
npm init
```
Install webpack, vue and vue-loader：
```
npm install webpack vue vue-loader
```

Install css-loader and vue-template-compiler：

npm install css-loader vue-template-compiler

Create src\app.vue file.

<template>
  <div class="app">{{msg}}</div>    

</template>


<script>

export default {
    data() {
        return {
            msg: 'abc',
        }
    }
}
</script>


<style scoped>

.app {
    color: red;
}
</style>

Create src\index.js entry point file, mount vue components to HTML:

import Vue from 'vue'
import App from './app.vue'

// Create div element
const root = document.createElement('div')
// Add div to html>body
document.body.appendChild(root)

// Mount vue to html
new Vue({
    render: (h) => h(App)
}).$mount(root)

Config webpack parameter: entry, output andmodule > rules in webpack.config.js:

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const config = {
  mode: '',
  //webpack 编译目标
  target: 'web',
  // entry point path
  entry: path.join(__dirname, 'src/index.js'),
    
  //output path
  output: {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
          {
              test: /\.vue$/,
              loader: 'vue-loader'
          },
      ]
  },
  plugins: [
      new VueLoaderPlugin(), //Vue-loader在15.*之后的版本需要配合一个 VueLoaderPlugin 插件才能正确使用
  ]
}
  
module.exports = config

Config build script in package.json > scripts:
```
"scripts": {
  //...
  "build": "webpack --config webpack.config.js"
},
```
tips：在package.json中配置webpack会调用安装在项目中webpack，而在Terminal中运行webpack会调用全局的webpack，全局的webpack可能和项目中要使用的不一样。

Config load static resourcies:

module: {
    rules: [
        //...
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.styl$/,
            use: [
                'style-loader',
                'css-loader',
                'stylus-loader'
            ]
        },
        {
            test: /\.(gif|jpg|jpeg|png|svg)$/,
            use: [
                {
                    loader: 'url-loader', //封装的file-loader
                    options: {
                        limit: 1024, //将小于1M的图片以代码的方式写在html中
                        name: '[name].[ext]'
                    }
                }
            ]
        }
    ]
}

Install style-loader, url-loader and file-loader：

npm install style-loader url-loader file-loader

Install stylus-loader and stylus：
```
npm install stylus-loader stylus
```
Install html-webpack-plugin:
```
npm i html-webpack-plugin
```

Config HTMLPlugin in webpack.config.js:

//...
const HTMLPlugin = require('html-webpack-plugin')
  
//...
plugins: [
    //...
    new HTMLPlugin(), //dist编译出来的js和图片等静态文件，需要引入到html方能显示在web，引入html plugin
]

Install webpack-dev-server:
```
npm i webpack-dev-server
```
Install cross-env:
```
npm i cross-env
```

Config build/dev script use cross-env in package.json > scripts:

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

Config webpack devServer:

//...
const webpack = require('webpack')

//...
const isDev = process.env.NODE_DEV === 'development'

const config = {
  //...
  plugins: [
    //...
    //webpack编译过程和自己的js代码中用作判断是否为dev环境
    new webpack.DefinePlugin({
        'process.env': {
            NODE_DEV: isDev ? '"development"' : '"production"'
        }
    })
  ] 
}

if(isDev) {
    // 方便在浏览器调试代码
    // eval: 代码映射展示比较乱 source-map: 能够完整映射代码，单实效率低，文件大
    config.devtool = '#cheap-module-eval-source-map'
    // webpack2引入dev server，配置webpack dev server
    config.devServer = {
        port: 8000,
        host: '0.0.0.0', // 可以通过loclhost、127.0.0.1或本机ip访问
        overlay: {
            errors: true, // 将webpack编译的错误显示在网页上
        },
        // 不会重新加载整个页面，只重新渲染当前组件的效果
        hot: true,
        // historyFallback: {},
        // open: true, //启动webpack dev server是自动打开浏览器
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(), // 可以减少一些不必要的信息展示
    )
}

Issues

「下次一定」

Vue + Webpack Initialization

TOC

Vue + Webpack Initialization

Use Webpack Initialization vue project process:

Issues

FEATURED TAGS