使用 Webpack 打造 vue - todo 應用實踐（三）

時間 2020-05-05

標籤使用 webpack 打造 vue todo 應用實踐简体版

原文原文鏈接

這篇是第三篇了css

今天咱們主要是完善一下項目開發以前的配置html

使用 Webpack 打造 vue - todo 應用實踐（一）
使用 Webpack 打造 vue - todo 應用實踐（二）vue

安裝

cnpm install postcss-loader babel-loader babel-core autoprefixer --save-dev
 cnpm install babel-preset-env babel-plugin-transform-vue-jsx --save-dev
 cnpm install --save-dev babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx --sav
e-dev

目錄補充

增長了
- postcss.config.js
- .babelrc

代碼完善

// postcss.config.js
const autoprefixer = require('autoprefixer');

// stylus編譯成css後，再優化css代碼
// autoprefixer 給CSS代碼自動添加不一樣瀏覽器的前綴
module.exports = {
    plugins: [
        autoprefixer()
    ]
};

// .babelrc
// 經過babel將一些瀏覽器不能運行的js處理爲瀏覽器中能跑的js代碼
{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-vue-jsx"
  ]
}

// webpack.config.js
const path = require('path')
const isDev = process.env.NODE_ENV === 'development'
const htmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const config = {
  mode: 'development',
  target: 'web',
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 30000,
              name: '[name]-[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',        // 【todo】添加了postcss處理
            options: {
              sourceMap: true
            }
          },
          'stylus-loader'
        ]
      }
    ]
  },
  plugins:[
    new htmlWebpackPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"' 
      }
    })
  ]
}
if (isDev) {
  config.devServer = {
    port: 8000,
    host: 'localhost',
    overlay: {
      error: true
    },
    open: true,
    hot: true
  }
  
  config.plugins.push(
    // 這些插件的做用是，熱跟新模式下，若是修改了代碼，那麼試圖會無刷新從新渲染
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
}

module.exports = config;

// 順便附帶一下
// package.json
{
  "name": "vue-webpack-todo",
  "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",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --config webpack.config.js"
  },
  "author": "itPoet",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^8.1.0",
    "babel-core": "^6.26.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.5.1",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.4",
    "postcss-loader": "^2.1.1",
    "style-loader": "^0.20.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^0.6.2",
    "vue": "^2.5.13",
    "vue-loader": "^14.1.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^4.1.0"
  },
  "devDependencies": {
    "cross-env": "^5.1.3",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
  }
}