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