webpack一学就会

闲散客
439 阅读2分钟
webpack可以简单理解为前端打包工具，本文是实现js文件和css文件以及实现图片打包的完整过程。

总体结构如下图

首先创建两个js文件，如a.js和main.js,然后创建一个html页面如index.html

//a.js
export function add(a,b){  //export是es6模块化导出操作
 return a+b;
}

//main.js
import {add} from "./a.js";//es6模块化导入操作
console.log(add(1,3));
//index.html
<body>
<script src="main.js" type="module"></script>//type="module"是进行es6模块化的必写内容
</body>
//用服务器端打开index.html页面
日志上打印出  3 ,证明运行成功

然后进行js文件的打包

$ npm/cnpm/yarn init //进行初始化操作,当项目中出现package.json文件即初始化成功.
接下来进行webpack的安装，(接下来的所有操作将在yarn下进行)
$ yarn add webpack webpack-cli --save-dev  //webpack的安装
安装成功后在package.json文件中写入
{
  "name": "03-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": { //写入的内容
    "dev": "webpack",
  },
  "dependencies": {}

然后进行创建一个新的js文件(webpack.config.js必须如此命名)

//webpack.config.js
module.exports={
    entry:"./main.js"
}
然后进行如下操作
$ npm run dev
项目中会出现一个dist文件夹，该文件夹下有一个打包好的main.js文件，main.js文件中既打包了自身内容也打包了其他导入的文件。
//用服务器端打开index.html页面
日志打印 3，运行成功

接下来进行css打包

//需要将css代码打包到js中
//项目目录下新建css文件夹
css文件夹下新建index.css文件
//main.html
<body>
<div class="box"></div>
<script src="main.js" type="module"></script>
</body>
//index.css
.box{
width:100px;
height:100px;
background:red;
}
//main.js
import {add,sub} from "./a.js";
import "./css/index.css" //添加内容
安装css打包工具
$ yarn add css-loader style-loader --save-dev
//webpack.config.js
const path=require("path");
module.exports={
    entry:"./main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"index.bundle.js"  //dist文件夹下回出现一个index.bundle.js文件，该文件既打包了js也打包了css
    },
    module:{
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]} 
        ]
   }
}
//index.html
<body>
<div class="box"></div>
<script src="dist/index.bundle.js" type="module"></script>
</body>
然后进行
$ npm run dev
//用服务器端打开index.html页面
 页面出现红色方框区域即运行成功

最后进行图片打包


//需要将图片打包到js中
//项目目录下新建images文件夹
images文件夹下放入图片
//main.html
<body>
<div class="box"></div>
<img src="images/图片名"></img>
<script src="dist/index.bundle.js" type="module"></script>
</body>
//main.js
import {add,sub} from "./a.js";
import "./css/index.css"
import "./images/f.jpg"
安装图片打包工具
$ yarn add file-loader url-loader --save-dev
//webpack.config.js
const path=require("path");
const htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
    entry:"./main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"index.bundle.js"//dist文件夹下回出现一个index.bundle.js文件，该文件既打包了js也打包了css还有图片
    },
    module:{
         rules:[
             {test:/\.css$/,use:["style-loader","css-loader"]},
             {test:/\.(jpg|png|jpeg|gif)$/,use:"url-loader?limit=10240"} // ?limit=10240该代码表示如果图片大小超过10k则将图片打包后放在dist文件夹下，否则也和css一样打包到js中
         ]
    }
然后进行
$ npm run dev
//用服务器端打开index.html页面
 页面出现红色方框区域和图片即运行成功

为了简化我们在进行css和js打包后需要改变地址以及 图片打包后需要对图片路径进行改变的操作，我们可以进行

//安装html-webpack-plugin插件
$ yarn add html-webpack-plugin --save-dev
//webpack.config.js
const path=require("path");
const htmlWebpackPlugin=require("html-webpack-plugin");//导入插件
module.exports={
    entry:"./main.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"index.bundle.js"
    },
    module:{
         rules:[
             {test:/\.css$/,use:["style-loader","css-loader"]},
             {test:/\.(jpg|png|jpeg|gif)$/,use:"url-loader?limit=10240"}
         ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:"./index.html"  //dist文件夹下会生成一个index.html文件，其中的路径和地址不用修改
        })
    ]
}
然后进行
$ npm run dev
//用服务器端打开index.html页面
 页面出现红色方框区域即运行成功

为简化重复打开服务端的操作，我们可以进行

//安装webpack-dev-server工具，该使用会将源代码保存到内存中去，即运行一次后，如果我们将dist文件删除仍然可以运行页面。
$ yarn add webpack-dev-server --save-dev
//修改package.json内容
"license": "MIT",
  "scripts": { //修改部分
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "dependencies": {}
然后进行
$ npm run dev
接下来会出现如下图所示的内容

​

复制该地址如上图中的http://localhost:19369/粘贴到浏览器的地址栏中 即可打开页面。

注意：在分别进行js,css以及图片打包时，可以删除dist文件夹，以便看到最新效果。





avatar
文章
阅读
粉丝