webpack构建工具
第一、安装node,安装好后,npm -v 查看版本,然后利用包管理器npm安装各种包
第二、创建目录结构类似下图
第三、我们首先要在根目录下生成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 整体配置如下: