使用方法:安装"/>
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
}
更多推荐
webpack (一) 使用方法:安装
发布评论