webpack入門級水坑

1、webpack+vue

在vue項目中配置webpack的入門級配置項(至於node那些安裝不說了)css

2、初始化

輸入初始化命令,生成package.josn文件html

npm init

3、安裝依賴包(node_module)

生成初始化的modulevue

npm install

4、配置webpack

在vue項目中建立一個webpack.config.js文件,在這裏配置webpack的一些配置,如entryoutputmodule>rules等等node

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

module.exports = {
  entry: path.join(__dirname, 'src/main.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        loader: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        loader: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

Tips 注意使用vue-loader的時候,須要引入VueLoaderPlugin插件,不然報錯
rules裏面配置的就是解析各類文件的loader配置,要解析什麼文件,就給配置對應的name-loader配置
plugins裏面就是配置插件用的react

5、webpack配置服務器

使用webpack-dev-server來配置開發環境運行webpack

npm install webpack-dev-server

Tips
正常在package.json文件裏面生成環境打包,是經過webpack --config webpack.config.js
而在開發環境下,須要經過webpack-dev-server來本地運行,webpack-dev-server --config webpack.config.js
在package.json中配置以下:web

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
}

既然運行不一樣的環境,天然就須要配置環境變量來判斷當前的運行環境,cross-envnpm

npm install cross-env

安裝這個環境切換變量,主要是解決mac和window的運行解析,由於window須要加一個set才能弄,而mac能夠直接運行上面的scriptsjson

"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 --config webpack.config.js"
}

獲取當前環境變量:數組

process.env.NODE_ENV

判斷當前環境變量:

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

若是是開發環境,則配置開發環境的屬性,這個屬性是webpack2.0增長的,以前沒有

if (isDev) {
  config.devServer = {
    port: 8888,
    host: '0.0.0.0', // 這個配置成這個,不要配置127.0.0.1,在vue 3.0裏面好像會致使IP沒用
    overlay: {
      errors: true // 編譯出錯在網頁上顯示錯誤
    }
  }
}

6、配置HTML輸出插件

npm install html-webpack-plugin

在webpack中引用

const HTMLPlugin = require('html-webpack-plugin')
plugins: [
    new HTMLPlugin()
]

7、vue,react必須插件

plugins:[
    new webpack.DefinePlugin({ // 添加環境變量
        process.env: {
            NODE_ENV: isDev ? '"development"' : '"production"'
        }
    })
]

8、開發環境熱重載

config.devServer = {
    hot: true
}
// 往插件數組裏追加兩個熱重載輔助插件
config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
)
// 追加source-map代碼調試工具
config.devtool = '#cheap-module-eval-source-map'

Tips eval和source-map是兩個不一樣的調試工具

相關文章
相關標籤/搜索