webpack_angularjs1.x - archering/basic GitHub Wiki

环境安装和准备工作

（1）创建一个项目

 npm init -y

（2）创建文件夹和必要的文件

 mkdir src config

 touch config/webpack.dev.js  //创建 开发环境的webpack配置文件

 touch config/webpack.prod.js //发布环境的webpack配置文件

 touch index.html //项目的主index.html

 touch src/app.js

（3）安装webpack

 npm install --save-dev webpack   //本地安装webpck4

 npm install webpack-cli -g

（4）babel 处理es6语法

npm install --save-dev babel-loader @babel/core

npm install @babel/preset-env --save-dev

touch .babelrc   //根目录创建.babelrc

.babelrc里面写

{
    "presets" : ["@babel/preset-env"]
}

（5） 安装css处理loader

  npm install css-loader --save-dev   处理普通css中的 @import url 等

  npm install style-loader --save-dev  在html中插入标签<link> 嵌入css

(6) 安装相关plugins

  npm install html-webpack-plugin --save-dev  把js,css 以标签形式插入html 模板

  npm install mini-css-extract-plugin --save-dev // 将css文件已外联形式<link> 插入html模板的 <head>中
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️