前言

Webpack所执行的环境是Node环境。

项目准备

(1)创建目录:

    mkdir WebpackTest

PS:文件夹的名字不要起关键字webpack,避免冲突。

(2)初始化空的目录:

    npm init

输入上述命令后,根据提示输入 project name(要求小写),其他的采用默认即可,一路回车,最后输入y表示yes。

这个命令的作用是创建一个初始化的文件package.json。如下图所示:

接下来,npm才能正常地安装各种 package。

(3)创建业务目录:

20180309_0928.png

文件配置

创建配置文件 webpack.config.js

webpack.config.js是Webpack所需要的配置文件,我们直接在项目的根目录中新建这个文件即可。

接下来,我们需要对这个文件进行配置。包括如下部分:

基础配置:(也是webpack必须有的配置)

  • entry:入口。表示webpack要构建哪个文件。

  • module:配置各种loader。

  • plugins:所依赖的插件

  • output:构建成功后,输出的位置。

进阶配置

  • resolve

  • devtool

  • devServer

上面的内容,我们详细来介绍。

基础配置

我们在webpack.config.js文件里可以这样写:

const path = require('path');

module.exports = {
  entry: {
    app: '.app/js/main.js'  //webpack从这个文件作为入口,进行构建
  },
  module: {
    loaders: [{    //告诉webpack,什么样的文件就用什么解析器
      test: /\.html$/,   //这里用到了正则
      loaders: `html-loader` //所有的loaders都要单独安装。稍后再说
    },{
      test: /\.vue$/,
      loaders: `vue-loader`
    },{
      test: /\.scss/,
      //【注意】webpack支持多个loader的串行解析,解析顺序**从右向左**。
      //这里的解析顺序是:遇到sass文件时,先用sass loader进行处理;处理结束后,交给css loader;css loader处理结束后交给 style loader
      loaders: `style-loader!css-loader!sass-loader`
    }]
  },
  plugins: [],
  output: {
    filename: '[name].min.js',   //这里的`[name]`是变量,不要乱写,它是和上面的 entry 里面的 app 对应起来的。
    path: path.resolve(__dirname, './dist') //值里面的`path`就是第一行里通过Node.js的方式引入的path。`__dirname`是环境变量,代表当前路径。
  }
}

注意上方代码的注释,写得很详细。尤其注意scss文件的解析方式。

光这样写还不够,我们还要安装module部分所列出的各种loader:

# D 表示开发依赖
npm i html-loader D

# 一次性安装各种loader
npm i vue-loader style-loader css-loader sass-loader -D

进阶配置

1、devServer:

我们在本地开发时,常常需要启动一个服务,这样的话,我们不再使用file协议,而是使用http协议。这里就需要用到配置文件里的devServer参数。

我们先打开Webpack的官方文档里关于devServer的部分。摘取下面的代码,直接copy到webpack.config.js文件里,位置和module并列:

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

参数解释:

  • contentBase:如果你需要提供一个静态文件,这里就配置静态文件的输出路径。

  • compress:表示整个服务要开启gzip压缩。

  • port:服务占用的端口。

然后,如下如下命令,安装[webpack-dev-server](https://doc.webpack-china.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server)

npm install --save-dev webpack-dev-server

其他

构建工具还可以帮我们把px转成rem。

















results matching ""

    No results matching ""