Webpack
为何要用::友好支持模块化、代码混淆、处理js兼容、性能优化等…
WebPack的使用
第一步:初始化项目:npm init -y
第二步:新建 src/index.html
第三步:安装模块Jquery npm install jquery
第四步:测试隔行换色
index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>隔行换色</title>
- <script src="./index.js"></script>
- </head>
- <body>
- <h1>web pack测试</h1>
- <!-- vscode快捷方式:ul>li{第$个li}*10 -->
- <ul>
- <li>第1个li</li>
- <li>第2个li</li>
- <li>第3个li</li>
- <li>第4个li</li>
- <li>第5个li</li>
- <li>第6个li</li>
- <li>第7个li</li>
- <li>第8个li</li>
- <li>第9个li</li>
- <li>第10个li</li>
- </ul>
- </body>
- </html>
index.js
- import $ from 'jquery'
- $(function(){
- $('li:odd').css('backgroundColor','green');//odd偶数
- $('li:even').css('backgroundColor','pink');//even奇数
- })
运行报错:
这就是兼容性问题
使用webpack打包解决问题官网：https://www.webpackjs.com/
第五步:安装webpack(两个包)npm install webpack webpack-cli -D (开发模式)
第六步:新建webpack.config.js
- /**
- * webpack 配置文件
- */
- module.exports={
- //调试时使用development开发模式
- //打包时使用production生产模式
- mode : 'development'
- }
-
配置文件部分属性:
- 默认打包入口:/src/index.js
- 默认打包出口:/dist/main.js
可进行配置:
- /**
- * webpack 配置文件
- */
- const path=require('path');
- module.exports={
- //调试时使用development开发模式
- //打包时使用production生产模式
- mode : 'development',
- entry: path.join(__dirname,'./src/index.js'), //__dirname表示当前目录当前路径
- output: {
- path: path.join(__dirname,'./dist'),
- filename:'bundle.js',
- },//出口
-
- }
-
第七步:修改package.json(可有可无,运行方式不同)
package.json
- "scripts": {
- "dev": "webpack"
- },
第八步:执行打包npm run dev
目录下多出文件夹dist,终端含有’successfully’表示打包成功!
测试
首先修改index.html引入的js包
- <!--<script src="./index.js"></script>-->?
- <script src="../dist/main.js"></script>
运行:
表明webpack打包成功有效并且解决了兼容性问题!!!
WebPack打包CSS
传统都是用link引用
第一步:安装处理css的loader:npm i style-loader css-loader -D
根据实际需要安装对应的加载器
npm install less-loader -D (less加载器)
npm install sass-loader node-sass -D (sass加载器)
第二步:修改webpack.config.js:
- /**
- * webpack 配置文件
- */
- const path=require('path');
- module.exports={
- //调试时使用development开发模式
- //打包时使用production生产模式
- mode : 'development',
- entry: path.join(__dirname,'./src/index.js'), //__dirname表示当前目录当前路径
- output: {
- path: path.join(__dirname,'./dist'),
- filename:'bundle.js',
- },//出口
- devServer:{
- static: './src'
- },
- //新增内容css
- module:{ //处理css
- rules:[ //(规范)约束
- {test:/\.css$/,use:['style-loader','css-loader']}//正则表达式拓展名.css
- ]
- }
- }
-
第三步:引入CSS文件:`
css
- #box{
- width: 200px;
- height: 100px;
- background-color: greenyellow;
- }
index.js中加在上方(css的路径要填写正确)import './css/style.css'
index.html
- <h1>CSS</h1>
- <div id="box">盒子</div>
第四步:运行测试:npm run dev
成功!!!
WebPack自动打包
由于每次更新代码都需要手动打包,这时我们要用上自动打包
①安装 npm install webpack-dev-server -D
②修改package.json(使得窗口自动打开并且自动打包)
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9090"
- },
③修改webpack.config.js
- devServer:{
- static: './src'
- }
④html引入bundle.js
打包后的文件都在根目录下
- <script src="/bundle.js"></script>
④运行验证npm run dev原理:服务器上运行监听,所以需要访问服务器
直接访问即可,成功实现WebPack自动打包
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注w3xue的更多内容!
经验首页