wepack初探

重新整頓webpack搭建流程

webpack重要設置

• entry：進口設置
• output：輸出設置
• module：文件剖析模塊設置
• plugin：插件設置

目次引見

• build/：寄存webpack構建設置文件

• src/：項目開闢目次

  • public/：大眾靜態文件
  • script/：劇本文件
  • style/：款式文件
  • view/：頁面文件

初始npm包

開闢依靠

• babel-core
• babel-loader
• webpack：這裏運用webpack3版本

最先搭建

1. 在build/文件夾下面建立webpack.dev.js，代碼以下：

   const path = require('path')
   
   module.exports = {
       entry: path.join(__dirname, '../src/script/index.js'),
       output: {
           path: path.join(__dirname, '../dist'),
           filename: 'js/[name].js'
       },
       module: {
           loaders: [{
               test: /\.js$/,
               use: 'babel-loader'
           }]
       }
   }

2. 在src/script/文件夾下面建立index.js，恣意寫幾行代碼以便測試
3. 在src/view/文件夾下面建立index.html，引入上面的index.js文件
4. npm init -y或許yarn init -y建立package.json文件，裝置開闢依靠

5. 在package.json文件中增加scripts屬性

   "scripts": {
       "dev": "rm -rf dist & webpack --config build/webpack.dev.js"
   }

翻開終端實行npm run dev敕令

引入html-webpack-plugin插件

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

module.export = {
    entry: path.join(__dirname, '../src/script/index.js'),
    output: {
        path: path.join(__dirname, '../dist'),
        filename: 'js/[name].js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            use: 'babel-loader'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 打包天生html文件名，該文件被安排在輸出目次中
            filename: 'index.html',
            // 模板文件，以該文件天生打包后的html文件
            template: path.join(__dirname, '../src/view/index.html')
        })
    ]
}