自己动手搭建webpack

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')
        })
    ]
}