webpack 使用

安装

Hello,world

使用npm 初始化项目

创建一个新文件夹,命名为entry ,在命令行中进入这个文件夹,使用npm init 命令对项目设置初始化:在出现的name 等设置中,可以自行设置,也可以一路回车.结束之后会在entry 文件夹内发现 package.json 文件,内容即是:

{
  "name": "entry",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

为此项目集成webpack

项目初始化已经完成,现在需要把webpack添加进来:在命令行中输入npm install webpack --save-dev 命令行会对webpack进行安装,安装完成后在 package.json 文件夹中就会看到新增加了几行内容:
```
{  
 ......
"author": "WangSen",
 "license": "ISC",
 // 下面是新增加的部分
 "devDependencies": {
   "webpack": "^3.10.0"
 }
}
```
同时,entry 文件夹中也新增了node_modules 文件夹,主要是为webpack提供依赖.
Hello,world

现在需要具体使用webpack来将Hello,world 输出到页面中来.首先,在entry 文件夹根目录下创建src 文件夹,在此文件夹下创建 app.js 文件,这个文件内容为输出Hello,World 到页面中去:
```
var root = document.getElementById('root');
root.textContent = 'Hello,World';
```
在entry 文件夹下创建dist 文件夹,此文件夹下创建index.html 文件,用于展示界面:
```
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>entryPage</title>
</head>
<body>
 <div id='root'></div>
   <script src="bundle.js"></script>
</body>
</html>
```
为什么会引入的是bundle.js 下文会有解释.

既然准备工作都做好了,就是用webpack进行编译吧.在命令行中输入webpack ./src/app.js ./dist/bundle.js 可以看到 webapck的编译语法是 webpack {初始文件目录} {转化后的文件目录} ,这也是我们为什么在index.html 文件中引入的是bundle.js 而不是src 文件夹下的app.js . 回车确认后:

打开dist 文件夹下的index.html 文件,即可以看到 Hello,World .

webpack.config.js 配置 webpack

使用webpack.config.js 配置 webpack

在实际使用webpack中,我们往往不会使用webpack {入口文件} {输出文件} 这样的命令来运行webpack,毕竟很繁琐.所以我们需要使用webpack.config.js 来配置一些设置.

首先是在entry 根目录中创建 webpack.config.js :

module.exports = {
    entry: './src/app.js',
    output: {
        filename: './dist/bundle.js'
    }
};

可以看到我们设置了入口文件entry:... 以及目标文件output: {...} ,这样设置之后,我们在命令行中,输入webpack 就可以回车了,因为webpack会去寻找webpack.config.js 文件,并读取内容,根据内容做出相应处理.刷新此前打开的index.html 文件,依然可以看到内容正确显示.

在配置完webpack.config.js 文件之后,我们又想到开发环境和生产环境的异同,难道都要用webpack 命令来解决么?显然是不可能的,所以我们现在要去配置package.json 文件:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // --watch 持续监听文件的更改,-d包含source maps 调试时候定位到源文件
    "dev": "webpack -d --watch",
    // -p 生产环境对代码进行压缩
    "prod": "webpack -p"
  },
// 实际文件中需要去掉注释

使用 npm run dev 以及 npm run prod .将这些命令集合在package.json 中主要是为了维护以及简洁.

插件的使用

配置第一个插件

webpack中支持很多不同功能的插件,在具体的项目中需要安装不同的插件,这里安装html-webpack-plugin 插件来进行演示:

在上文中,我们在dist 文件夹下创建了index.html 文件,作为网站的根文件.但是,我们也发现了问题,里面已经写入了bundle.js 的引入,如果js文件动态变化,我们就需要更改index.html,那就太麻烦了.这时,就需要html-webpack-plugin 这个插件来发挥作用了.

进入插件github主页,查看具体使用等信息,

安装:npm install html-webpack-plugin --save-dev ,安装成功后,在package.json 中会有显示此插件的名称以及版本号.

使用: 把dist/index.html 文件删除,使用html-webpack-plugin 插件来自动生成,更改webpack.config.js 文件:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    plugins: [new HtmlWebpackPlugin()]
};

可以看到我们引入了此插件,并在plugins 属性下实例化了此插件(并未进行设置),在命令行中运行npm run dev ,可以看到dist 文件夹下生成了index.html文件(由于我们之前的设置,现在打开index.html 文件会有问题,但这个不重要).

进一步使用: 通过查看这个插件的文档,我们可以知道这个插件有很多设置:

    plugins: [new HtmlWebpackPlugin({
      // 设置网页title
        title: "entryPage",
      // 设置网页模板
        template: "./src/index.html",
      // 哈希,为了更好的cache
        hash: true
    })]

还有其他设置,在官方文档里.

使用 loader

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。也就是说 loader 可以把 Scss 转化成 CSS, 把TypeScript 转化成 JavaScript等.

我们就先来使用css-loader 和 style-loader 处理 CSS:

首先准备好内容src/app.css

body {
    background: gray;
}

然后在src/app.js 中引入此样式文件:import css from './app.css' ,

再安装loader使其能够处理css文件:npm install css-loader style-loader --save-dev

并在webpack.config.js 中配置:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {...},
    // 添加一下设置
    module: {
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin({...})]
};

在进行编译npm run dev 之后打开 index.html文件,可以看到样式已经运用上了.

也可以使用sass-loader 将 SASS转化为CSS:

也是安装npm install sass-loader node-sass --save-dev ,设置:

// webpack.config.js
    module: {
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
          // 添加scss编译方案
            {
                test:/\.scss$/,
                use: ['style-loader', 'css-loader','sass-loader']
            }
        ]
    },

有时候我们需要把css文件编译后放入一个css文件中,而不是写入js文件中,这就需要extract-text-webpack-plugin 把CSS分离成文件了

还是查看文档安装npm install extract-text-webpack-plugin --save-dev ,配置:

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
    ...
        module: {
        rules:[
            ...
            {
                test:/\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "entryPage",
            template: "./src/index.html",
            hash: true
        }),
      // 将style.css文件输出到`dist/css/style.css` 
        new ExtractTextPlugin({
            filename: (getPath) => {
                return getPath('css/style.css')
            }
        })
    ]
};

更多关于此插件的配置,查看文档.

重新编译后,可以看到dist 文件夹下多了一个style.css 文件.

webpack-dev-server构建本地服务器

开发过程中,需要不断地修改代码,不能每次都手动刷新,这时我们需要实时监听我们代码的修改,并自动刷新的组件.

webpack 使用教程