原生js项目改造

项目初始化

1. 创建npm 项目
   1. npm init
2. 安装 webpack 依赖
   1. npm i webpack webpack-cli -save-dev
3. 创建js 入口文件
   1. src/index.js
4. 创建 webpack 配置文件 ```javascript const path = require(‘path’)

module.exports = { mode:’development’, entry:’./src/index.js’, output:{ filename:’bundle.js’, path:path.resolve(__dirname,’./dist’) }
}

5. 配置 `package.json` 的 `build` 命令
6. 执行 `npm run build` 打包
<a name="t5MEz"></a>
#### 首页移植
1. 资源文件拷贝,将源码中 `html / js / css / img` 文件拷贝至新项目中
   1. 将 `index.html` 拷贝到 `src / index.html`
   2. 将 `js` 目录拷贝至 `src/js`
   3. 将 `css` 目录拷贝至 `src / css`
   4. 将 `img`目录拷贝至 `src / img`
2. 删除`index.html`中的`link`和`script`
3. 安装`html-webpack-plugin`插件
   1. `npm i html-webpack-plugin --save-dev`
4. 在 `webpack.config.js` 中配置`html-webpack-plugin`
5. 在`src/ index.js`中添加css引用
   1. `npm i -D css-loader style-loader`
   2. 在`webpack.config.js` 中添加
```javascript
module:{
  rules : [
    test:/\.css$/,
    use: ['style-loader','css-loader']
  ]
}

import './css/public.css'
import './css/index.css'

1. 在src/index.js中添加js引用

   import './js/jquery-1.12.4.min.js'
   import './js/public.js'
   import './js/nav.js'
   import './js/jquery.flexslider-min.js'

• 上述会产生 $ 没定义的情况，所以将 jq 换成 node_module 安装包

npm i -S jquery flexslider

1. 调整index.html中的图片路径

进阶操作之多 js 分离

目前index.html和login.html同时引用了main.js，main.js对应src/index.js，该文件同时引用了index.html和login.html的依赖资源，这样会导致 src/index.js随项目规模扩大越来越臃肿，要解决这个需要指定index.html和login.html分别引用不同的js文件，这就需要涉及 webpack多入口配置

进阶操作之开发模式

1. 安装webpack-dev-server
   1. npm i webpack-dev-server --save-dev
2. 在 webpack.config.js 中添加 webpack-dev-server 配置
3. 安装 npm i copy-webpack-plugin -D
   1. 复制静态资源目录下的 img

进阶操作之css 剥离

1. 安装 mini-css-extract-plugin
   1. npm i mini-css-extract-plugin -D
2. 在webpack.config.js中添加相关配置

进阶操作之 js css 压缩

1. js 压缩

npm i -D uglifyjs-webpack-plugin

1. css 压缩

npm i -D css-minimizer-webpack-plugin

1. 使用 treeshaking 使用前提和触发条件
   1. mode 为生产模式
   2. 引用 npm 包得 esm规范
   3. 通过解构得方式获取方法

进阶操作之利用 ejs 进行公共代码复用

1. 安装ejs-loader

npm i -D ejs-loader

1. src 上面创建 header.ejs文件，将公共header html部分放入 ejs 目录下得 header.ejs
2. html 中引入 header.ejs

<%require('./ejs/header.ejs')({title:'首页'})%>

1. 执行 npm run build

进阶操作之利用CleanWebpackPlugin清空dist目录

1. npm i -D CleanWebpackPlugin