webpack构建工具

第一、安装node,安装好后，npm -v 查看版本，然后利用包管理器npm安装各种包

第二、创建目录结构类似下图

app文件夹下放置我们的开发文件，比如 index.less文件和主逻辑main.js文件，以及作为模块文件的module1.js，

将来main.js和module1.js都会整合到public目录下的bundle.js中，我们的index.html直接引用bundle.js即可。

public目录就是浏览器执行需要的文件，包括index.html、将来index.less生成的index.css和bundle.js。

webpack.config.js是webpack的配置文件

第三、我们首先要在根目录下生成package.json文件，它会显示以后我们通过npm安装的各种依赖包，我们通过终端进入根目录，执行：npm init

然后终端会让我们输入一堆信息，随便写即可。最后输入yes确认，会发现我们的根目录下自动生成了一个package.json文件

第四、

接下来通过全局安装webpack

在终端执行cd 退回到全局，然后执行：（sudo） npm install -g webpack，mac下报错的话前面可能需要加sudo获取管理员权限（下同）。

这样就安装好了webpack，可以再全局通过webpack -v来查看是否安装成功。

然后我们进入项目根目录局部安装webpack，进入./webpack-demo，执行：npm install webpack --save-dev

如果安装成功，此时根目录下会出现一个node_modules文件夹。

以后我们在根目录下通过npm安装的各种依赖包都会默认安装到这个文件夹下面。

第五、loader加载器。

*babel-core,babel-loader 编译js代码

*babel-preset-es2015 es6编译成es5

*extract-text-webpack-plugin 插件包

在项目根目录下执行：npm install jquery less less-loader style-loader css-loader babel-core babel-loader babel-preset-es2015 extract-text-webpack-plugin --save-dev等（各个包之间空格分开） --save-dev 参数会把安装包自动加到package.json 的devDependencies下

第六、配置webpack.config.js

第七、index.html

index.less

module1.js

main.js

第八、webpack-dev-server实现页面的自动刷新。(需要删除首页引入的css,和js,因为使用npm start 启动服务，会自动生成css,js)

首先安装webpack-dev-server

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

然后修改package.json配置文件中：

"scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  }

使用npm start 启动服务。npm的 start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}，所以打包命令修改为npm run build。

这里如果使用webpack-dev-server 命令来启动就必须全局安装 devServer:

npm install webpack-dev-server -g

在webpack的配置文件中可以对devServer进行配置

// 配置devServer各种参数
    devServer: {
        contentBase: "./", // 本地服务器所加载的页面所在的目录
        historyApiFallback: true, // 不跳转
        inline: true // 实时刷新
    }

此时可以监听入口文件的改变，实时刷新页面，然而非入口文件的改变则不会被监听到，需要手动进行刷新。并且目标文件不包括index.html。这里使用html-webpack-plugin插件。

npm install html-webpack-plugin --save-dev

修改webpack配置文件，添加以下配置：

...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ....,
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 模版文件
        })
    ]
}

第九、

然后，我们就可以在命令行执行 webpack -w 来启动webpack了！

关于webpack的启动方式：

webpack // 最基本的启动webpack的方法

webpack -w // 提供watch方法；实时进行打包更新

webpack -p // 对打包后的文件进行压缩

webpack -d // 提供source map，方便调式代码

*****

这里记录一下遇到的坑：首先，devServer其实读取的是打包之后的文件，但是这些文件是存储在内存当中（并不会显示在app下）。然后由于使用HtmlWebpackPlugin这个插件，它可以自动帮你将打包的js插入模版html文件中，因此我们要将原文件（就是作为模版的index.html文件）中插入的main.js这行代码去掉。然后如果开启了publicPath这个选项，HtmlWebpackPlugin会插入publicPth选项的路径（'/assets/main.js'），devServer的index.html此时是无法读取到该目录下的文件。但是奇怪的是devServer此时直接没有插入该scripts。。不知道为啥。。但是为了部署的问题，cdn啥的，对开发环境和生产环境应该开启不同的publicPath，也就是说开发和生产应该使用两个不同的配置文件（包括sourcemap，devserver都不应该出现在生产的配置中）

webpack.config.js 整体配置如下：

猜你喜欢