版权声明:原创转载请注明出处,谢谢合作! https://blog.csdn.net/zhongqw_00/article/details/81255184
前言
使用包管理器npm
或cnpm
或yarn
创建一个项目
- 初始化项目,
npm init
会出现一些让你写的内容,直接回车就好,然后在你的项目文件下会生成一个
package.json
文件,这个放置一些依赖文件。
2. 创建
src
和
dist
目录,在src下创建
index.html
(将
dist / main.js导入
)和
index.js
,在项目根目录下创建
webpack.config.js
的webpack配置文件
webpack.config.js
module.exports = {
mode: 'development', // development(开发环境) production(产品环境,自动生成压缩文件)
};
![项目目录](https://upload-images.jianshu.io/upload_images/5645890-cad13ebadb8e7cd8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 3. 下载`webpack` `npm install webpack -D` 4. 下载`webpack-cli`
webpack
制定入口文件是src / index.js
,出口文件是dist / main.js
(webpack自动生成)
`npm install webpack-cli -D` *也可以将第三步第四步一起运行`npm install webpack webpack-cli -D`* **在这里执行`webpack`对项目进行打包** ![项目打包成功](https://upload-images.jianshu.io/upload_images/5645890-a04b62cff64b5998.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)由于自
webpack
的4.x版本之后,就将命令行和打包分开,打包由webpack-cli
来提供
托管main.js
- 对项目进行热更新
npm install webpack-dev-server -D
在package.json
加入"dev": "webpack-dev-server"
"dev": "webpack-dev-server --open --port 3001 --hot --host 121.0.0.1 "
--open
是直接打开浏览器,--open firefox
打开火狐
--port 8080
定义端口号
--hot
定义热更新
--host
定义域名(使用本地Ip,或者不指定)
使用npm run dev
发现命令并未退出,一直在执行…等待文件的变化
webpack-dev-server
打包之后的文件是main.js
保存在了/
(根目录)下,但是是隐藏的(项目根目录中看不到),放在了内存上,为了快速访问,将index.js
修改为
托管首页index.html
npm install html-webpack-plugin -D
改变webpack.config.js
//引入
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//导入在内存中自动生成index页面的插件
//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname,'./src/index.html'), //源文件
filename: 'index.html' //生成内存中首页的文件名称
});
module.exports = {
mode: 'development', // development production
plugins:[
htmlPlugin
]
};
路径
path.join(__dirname,'')
指代当前文件所处目录层级
注释 <script src = /main.js></script>