自己动手搭建webpack

从头整理webpack搭建流程

webpack主要配置

• entry&＃xff1a;入口配置
• output&＃xff1a;输出配置
• module&＃xff1a;文件解析模块配置
• plugin&＃xff1a;插件配置

目录介绍

• build/&＃xff1a;存放webpack构建配置文件

• src/&＃xff1a;项目开发目录

  • public/&＃xff1a;公共静态文件
  • script/&＃xff1a;脚本文件
  • style/&＃xff1a;样式文件
  • view/&＃xff1a;页面文件

初始npm包

开发依赖

• babel-core
• babel-loader
• webpack&＃xff1a;这里使用webpack3版本

开始搭建

1. 在build/文件夹下面创建webpack.dev.js&＃xff0c;代码如下&＃xff1a;

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

2. 在src/script/文件夹下面创建index.js&＃xff0c;任意写几行代码以便测试
3. 在src/view/文件夹下面创建index.html&＃xff0c;引入上面的index.js文件
4. npm init -y或者yarn init -y创建package.json文件&＃xff0c;安装开发依赖

5. 在package.json文件中添加scripts属性

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

打开终端执行npm run dev命令

引入html-webpack-plugin插件

const path &＃61; require(&＃39;path&＃39;)
const HtmlWebpackPlugin &＃61; require(&＃39;html-webpack-plugin&＃39;)module.export &＃61; {entry: path.join(__dirname, &＃39;../src/script/index.js&＃39;),output: {path: path.join(__dirname, &＃39;../dist&＃39;),filename: &＃39;js/[name].js&＃39;},module: {loaders: [{test: /\.js$/,use: &＃39;babel-loader&＃39;}]},plugins: [new HtmlWebpackPlugin({// 打包生成html文件名&＃xff0c;该文件被放置在输出目录中filename: &＃39;index.html&＃39;,// 模板文件&＃xff0c;以该文件生成打包后的html文件template: path.join(__dirname, &＃39;../src/view/index.html&＃39;)})]
}