webpack (一) 使用方法：安装

使用方法：安装"/>

webpack (一) 使用方法：安装

目录

1、安装

2、写index.html/main.js页面

3.1、用webpack将main.js内容打包到bundle.js

3.2、webpack.config.js  配置相关文件

3.3、webpack-dev-server

4、访问页面相关配置

1、安装

npm init -y
npm install webpack webpack-cli --save-dev

2、写index.html/main.js页面

index.html

<script src="./main.js"></script><ul><li>xxxxxxxxxxx</li><li>xxxxxxxxxxx</li><li>xxxxxxxxxxx</li><li>xxxxxxxxxxx</li><li>xxxxxxxxxxx</li><li>xxxxxxxxxxx</li></ul>

main.js  需要安装jquery包  npm install jquery --save

import $ from 'jquery'$(function () {  $("li:odd").css("background","#666")$("li:even").css("background","#ccc")
})

3.1、用webpack将main.js内容打包到bundle.js

//打包的语法  每次修改都需要重新打包 较麻烦
npx WEBPACK .\SRC\MAIN.JS -O .\DIST\BUNDLE.JS//修改html中script链接地址
<!-- <script src="../dist/bundle.js"></script> -->

3.2、webpack.config.js  配置相关文件

const path = require("path")module.exports = {entry:"./src/main.js",output:{filename:"bundle.js",path:path.resolve(__dirname,"dist")},mode:"development"
} 

 启动项目

npx webpack

3.3、webpack-dev-server

//1、安装
npm nstall webpack-dev-server -D//2、在package.json中添加start"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start":"webpack-dev-server"},//3、运行打包  打包生成的文件存储在内存中，读取更快
npm run satrt//4、修改html中script链接地址
<script src="../bundle.js"></script>

4、访问页面相关配置

4.1、在package.json里修改

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start":"webpack-dev-server --open --port 3000 --contentBase src  --hot"//自动打开 //端口号3000  //默认访问地址   //保存时只编译修改项},

4.2、在webpack.config.js中修改

deServer:{open:treu,port:3000,contentBase:src,hot:true
}