webpack学习笔记整理

最新推荐文章于 2024-03-14 23:10:33 发布

VIP文章 annschan

最新推荐文章于 2024-03-14 23:10:33 发布

阅读量982

点赞数

文章标签： webpack npm vue.js

本文链接：https://blog.csdn.net/m0_62407740/article/details/122690358

版权

1. 根目录下创建文件夹src 源代码都放在此

2. src文件夹下新建文件夹assets 可放图片字体文件等

3. 根目录下新建webpack.config.js

4. 根目录下放页面小图标 favicon.ico

5. src文件夹下创建index.html 、index.js、style.css 、style.less等源文件

6. dist文件夹自动生成。放输出文件

1. npm install [email protected] [email protected] 安装打包工具

npm init -y 初始化自动生成package.json文件等

2. npm install [email protected] 安装html文件打包插件

3. npm install [email protected] 自动加载页面，修改代码后浏览页面自动更新

4. 在package.json文件加入：

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

执行打包：npm run build 或 npm start 会自动生成dist文件夹 dist文件夹下含新生成的bundle.js index.html等。

执行webpack-dev-server：npm run dev 打开浏览器可实时修改代码实时更新修改

退出webpack-dev-server: ctrl + c

 devServer: {
        contentBase: './dist',
        port: 3000,
        host: '127.0.0.1',
        overlay: { errors: true },

关注