webpack从0开始搭建vw适配移动端的html5页面

前提，已经安装了node.js

新建文件夹wap-html5, npm init -y初始化,得到一个package.json
安装webpack相关的npm install webpack webpack-cli webpack-dev-server -D
package.json

{
  //...
  "scripts": {
    "dev": "webpack-dev-server"
  },
}

在根目录下新建webpack.config.js和src文件夹
在src文件夹下面创建index.html, index.css, index.js
- 通过index.js引入index.css
```
 require('./index.css')
```
安装打包.html文件的插件html-webpack-plugin，npm i html-webpack-plugin -D
安装处理.css的loader，npm i style-loader css-loader -D
安装处理图片的loader, npm i file-loader url-loader html-withimg-loader -D
将es6转为低版本的es5,npm i babel-loader @babel/core @babel/preset-env -D（本案例中其实可以用不到）
安装postcss和相关的插件进行适配移动端
a. 安装postcss postcss-loader,命令npm i postcss postcss-loader -D
b. 安装下列postcss相关插件:

postcss-px-to-viewport
命令npm i postcss-px-to-viewport -D

在根目录下新建一个postcss.config.js(或者.postcssrc.js，这两个其实一样的)，接下来在postcss.config.js文件对新安装的PostCSS插件进行配置：

module.exports = {
  "plugins": {
    "postcss-px-to-viewport": {
      viewportWidth: 750,      // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334,    // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,        // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw',      // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false       // 允许在媒体查询中转换`px`
    }
  }
}

最后，命令npm run dev运行，就能看到适配移动端的页面了，这样是比较简单的移动端页面，随这页面的复杂度增加，可能会出现一些问题，需要用到以下postcss插件，有兴趣的朋友可以自己去学习研究下。

webpack.config.js代码如下：

const path = require('path');
const HtmlWebapckPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  devServer: {
    host: '192.168.2.78' //写本机的ip地址，可以方便在移动端上面显示
  },
  entry: './src/index.js', //入口
  output: {
    filename: 'main.js', //输出文件名
    path: path.resolve(__dirname, 'dist') //输出目录
  },
  plugins: [
    new HtmlWebapckPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: 'html-withimg-loader'
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env'
              ]
            }
          }
        ]
      }
    ]
  }
}

打包文件，mode: 'development'改为mode: 'production'，命令npm run build

目录结构如下

wap-html
|
|-- node_modules
|-- src
|   |--index.js
|   |--index.css
|   |--index.html
|
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- webpack.config.js

最后编辑于：2019.06.04 11:30:55