1、新建工程,如webpack_prac
2、在工程文件路径下,执行 npm init 命令初始化项目
命令行会要你输入一些配置信息,我们这里一路按回车下去,生成一个默认的项目配置文件 package.json。
3、安装webpack
在工程文件路径下,执行 npm install webpack --save-dev //局部安装
4、目录结构如下
说明:
dist : 打包输出目录,只需部署这个目录到生产环境;
node_modules : npm安装的依赖包都在这里面;
src : 源代码;
entry.js : 入口js;
package.json : 项目配置信息;
webpack.config.js : webpack配置文件。
补充:我们在提交代码到 git 上去的时候,一般都会在 .gitignore
里指定忽略 node_modules 目录和里面的文件,这样其他人从 git 上拉下来的项目是没有 node_modules 目录的,这时我们需要运行
npm install
它会读取 package.json
中的 devDependencies
和 dependencies
字段,把记录的包的相应版本下载下来。
5、webpack打包
使用下面的命令打包,注意webpack4.xx打包命令需要加上 -o,
注:dist\js\bundle.js打包前不存在。
6、配置webpack.config.js
配置完成之后,只需要 webpack 命令就可以打包了 ,不需要再用步骤5里面的打包命令了。
7、打包css和图片文件
安装样式的loader:
npm install css-loader style-loader --save-dev
安装图片的loader
npm install file-loader url-loader --save-dev
在webpack.config.js中配置,如下:
在入口文件entry.js中import xx.css
然后执行 webpack 命令,就可以打包css文件了。
8、自动化构建工具webpack热加载实现---即webpack-dev-server
(1)安装
npm install webpack-dev-server --save-dev
(2)在终端(工程路径下)运行一段命令:
node_modules\.bin\webpack-dev-server(网上有的说直接输webpack-dev-server那是错的)
成功!输出的是这一段信息:
(3)配置webpack.config.js
不再需要使用相对路径找bundle.js文件了,直接src=”bundle.js”就可以(重要,一定要去掉路径)。
(4)再次执行node_modules\.bin\webpack-dev-server
(5)改变entry.js文件,每次保存时都会自动编译,不需要再打包了。
使用localhost:8080,即可访问index.html页面。
补充:babel使用入门,转自:https://blog.csdn.net/mm19931027/article/details/78741128