webpack构建工具
来源:互联网 发布:统计局数据库 编辑:程序博客网 时间:2024/06/05 12:27
第一、安装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 整体配置如下:
- webpack构建工具安装
- webpack构建工具
- 打包工具(构建工具)-webpack
- 前端打包构建工具Gulp、Rollup、Webpack、Webpack-stream
- React(10)-- 构建工具Webpack
- 简单了解webpack项目构建工具并初步使用
- webpack 全程学习记录! (前端自动化构建工具)
- JavaScript自动化构建工具grunt、gulp、webpack介绍
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- 用Webpack构建Vue
- webpack构建优化
- vue2+webpack构建项目
- 用Webpack构建Vue
- react+webpack构建步骤
- webpack进阶构建项目
- Webpack项目构建
- webpack构建与loaders
- React+Webpack构建环境
- 第九周项目1
- 第十一周——项目三—图的遍历
- iOS微信支付集成
- httpclient使用实例
- 第十一周项目4 — 利用遍历思想求解图问题 (2)
- webpack构建工具
- 锁与CAS介绍
- 几种 ETL 工具的比较(Kettle,Talend,Informatica 等)
- 数据结构上机实践第九周项目2
- 第十二周项目四
- Websocket原理
- 神经网络初识体验
- Const修饰符
- 【第八周】项目4(2)-稀疏矩阵的三元组表示的实现及应用