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
}