标签：npm 文件 study dev js webpack day01 打包
webpack
webpack是前端项目构建工具，它提供了模块化支持，代码压缩混淆，解决js兼容性问题，性能优越，提高了开发效率和项目的可维护性
webpack的基本使用
项目创建流程
创建项目目录并初始化 命令行创建**
package.json**依赖包>>> npm init -y创建src文件夹存放项目文件及js文件
npm安装webpack
>>>npm install webpack webpack-cli -D在根目录下创建
webpack.config.js的配置文件并编写 （必要 用来配置webpack）module.exports = { mode:"development" }
mode：项目的编译模式development：开发模式production：发布模式修改项目中的package.json文件添加运行脚本dev
"scripts":{ "dev":"webpack" }
scripts：脚本。 scripts节点下的脚本，可以通过 [npm run dev]运行,将会启动webpack进行项目打包运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件：
>>>npm run dev
- webpack打包完成后会在根目录中自动创建
dist文件， 用来存放打包后的src中的文件- 需将dist中的js文件引入到项目html页面中（将dist/main.js 替换成 src/index.js)
浏览项目页面 index.html
webpack打包的入口和出口 entry/output
在webpack 4.x中，默认设置：
src/index.js作为默认的打包入口js文件
dist/main.js作为默认的打包输出js文件
自定义入口和出口
通过webpack.config.js来设置入口/出口的js文件：
const path = require("path"); module.exports = { mode: "development", entry: path.join(__dirname, "./src/entry_fileName.js"), output: { path: path.join(__dirname, "./dist"), filename: "output_fileName.js" } }
- 导入
path模块 可以更方便处理文件路径entry设置入口文件路径output设置出口文件- entry_fileName / output_fileName 自定义入口/出口文件名
- output参数：[
path：设置出口路径 /filename：设置出口文件名 ]
webpack自动打包 /web-dev-server
–默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成出口的js文件,这样操作会非常繁琐。
–自动打包功能在打包后不会直接跳出命令，会监听数据的更新，并在页面上呈现最新的数据。退出自动打包需按
ctrl +c命令打包步骤：
npm安装自动打包功能的包：
>>> npm install webpack-dev-server -D修改package.json中的dev指令：
"scripts":{ "dev":"webpack-dev-server" } //修改前的dev："webpack"
- 有时打包后会因版本报错 解决方案： 将"webpack-dev-server"替换成"webpack web"
将引入的js文件路径更改为：
<script src="/output_fileName.js"></script>
- 打包后会在根目录下自动创建一个output_fileName.js的隐藏的js文件，可直接调用
运行cmd 进行打包
>>> npm run dev打开网址查看效果：http://localhost:8080
在自动打包完毕之后，默认打开服务器网页，实现方式就是打开
可通过修改dev命令修改默认的网址
"dev": "webpack-dev-server --open --host 0.0.0.1 --port 8888"
- 修改后 可通过访问 http://0.0.0.1:8888访问
配置预览页面 html-webpack-plugin
–使用html-webpack-plugin 可以生成一个预览页面。
–因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
实现默认预览页面功能的步骤如下：
安装默认预览功能的包:
>>> npm install html-webpack-plugin -D修改
webpack.config.js文件://导入包 const HtmlWebpackPlugin = require("html-webpack-plugin"); //创建对象 const htmlPlugin = new HtmlWebpackPlugin({ //设置生成预览页面的模板文件 template:"./src/index.html", //设置生成的预览页面名称 filename:"index.html" })修改
webpack.config.js文件，添加plugins信息：module.exports = { //...... plugins:[ htmlPlugin ] }
标签：npm,文件,study,dev,js,webpack,day01,打包 来源： https://blog.csdn.net/weixin_48920282/article/details/118366771
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。