Webpack4基本打包(一)-----------webapck4打包js，html,css,image

最新推荐文章于 2021-12-29 00:27:38 发布

qq_39125445

最新推荐文章于 2021-12-29 00:27:38 发布

阅读量1k

点赞数 1

分类专栏： Webpack 文章标签： webpack打包

本文链接：https://blog.csdn.net/qq_39125445/article/details/88237171

版权

Webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

要实现wepack打包，首先安装一以下内容

npm install webpack -g

指定版本npm install webpack@1.15.0 -g

npm install webpack-cli -g

npm install webpack-dev-server -g

安装webpack-cli是webpack4独有的。

打包步骤

1.首先创建3个文件夹 mkdir dist src config

2.git初始化文件夹，便于后期传到github，git init

3.然后初始化生成package.json,使用cnpm init -y（-y是按照默认的模式安装）

在webpack4中可以实现简易打包

例子：

在src文件夹中创建index.js，dist文件夹中创建index.html，切入文件夹，可以使用cd .>index.js创建文件，在mac.linux使用touch index.js

使用code .使用vscode打开文件

webpack --mode=develpoment

webpack --mode=prodution

这就是webpack的简易打包方式，但是加载css需要webpack.dev.js这个文件，所以所还是得使用之前的打包方式config.dev.js配置文件控制

先看打包文件目录，将main.js打包，然后index.html引用这个打包文件

这样只适用于只有js文件需要打包，但是一般线上环境需要打包js,css,html,image文件，那么就需要继续像之前那样配置config

配置webpack.dev.js

const path = require("path");
module.exports = {
    //入口文件
    entry: {
        main: "./src/main.js"//路径是以webpack根目录
    },
    mode: "production",//配置生产环境或者开发环境
    output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),//使用绝对路径作为相对路径配置路径
        // publicPath: "/"
    },
    devServer: {
        contentBase: "dist"//用于配置刚进入服务器，就显示的页面
    }
}

入口文件可以有多个entry:{main:[./src/main.js,"./src/index.js"]}，出口文件只能有一个，必须指定开发环境还是生产环境，在output中使用publicPath:"/",作用是作为一个引入放入公共路径。出口文件filename指定的时候【name】意思是指定使用入口文件main为名字输出，这个entry的main可以顺便取名字的

配置好后，开始打包。

webpack --config=config/webpack.dev.js

webpack-dev-server --config=config/webpack.dev.js

需要注意的是路径上面的内容必须使用引号包裹起来，并且使用了webpack-dev-server后，只要不更改配置文件，随时都是可以热更新的。

这就将src/main.js打包成main-buddle.js，并且被index.html引用了。

在输出文件里面配置publicPath就可以直接在index.html使用。

 <script src="/mains-bundle.js"></script>

这样配置直接打开index.html是看不到效果的，这样应该是publicPath是本地服务器的问题，必须运行本地服务器命令才使用公共路径/

下面打包css，html请看

在main.js引用创建的css文件，这样打包main.js，直接将css一起打包进来了

在main.js里面使用require("main.css"),然后webpack打包

这就出现问题了，webpack只能识别js文件，webpack无法识别css，那就必须要一个loader加载器来帮忙加载，那么我们安装吧

cnpm install css-loader style-loader

css-loader是通过import导入文件，style-loader是通过style标签的形式导入css文件，好了，style是将样式写入html文件里面去，css-loader是将样式写入到打包文件里面去，可以在config里面配置了

module: {

rules: [{

test: /\.css$/,

use: [{

loader: "style-loader"

},

{

loader: "css-loader"

}

]

}]

}

并且在devServer里面加一个overlay:true属性，那么就可以热更新在内容，这样css就算打包成功了。

最后我们来设置一个东西，因为每次打包太长的命令，我们来修改下package.json

将scripts里面的内容覆盖成这样就ok。

下面一节我们讲解打包html和image

和css有点相似，但是所有的HTML文件都要放在src里面了，dist打包出来只有main-bunddle.js和打包html文件，那么安装三个加载器html-loader由于加载html，extract-loader用处是为了output出口文件只有一个，用这个加载器将输出的html和main.js分开。

file-loader就是输出的html改名的问题

安装好loader后，同理在webpack.dev.js里面引用，也是在rules里面

记得先在打包的js文件里面引入require（".html"），像css一样，因为webpack只打包js文件，其余的文件都是需要引入的。

{

test: /\.html$/,

use: [{

loader: "file-loader",

options: {

name: "[name].html"

}

},

{

//用来区别打包的js和html分开

loader: "extract-loader"

},

{

loader: "html-loader",

options: {

attrs: ["img:src"]

}

}

]

},