webpack4 高手之路第四天

cgh1999520 发布于2019-08-05 18:11 / 2406人阅读

摘要：配置文件中设置引入文件之前讲过在引用文件的时候可以引入和，诸如这样现在提供一种更常用和更便捷的方法。同样先在项目文件夹下安装和模块配置文件如下选项用来处理对应的模块用正则匹配所有的文件使用模块这样就已经可以正常打包文件了。

配置文件中设置引入css文件

之前讲过在引用css文件的时候可以引入style-loader和css=loader，诸如这样：

require("style-loader!css-loader!./src/css/style.css")

现在提供一种更常用和更便捷的方法。

同样先在项目文件夹下安装style-loader和css=loader模块
npm install style-loader css-loader --save-dev

配置文件webpack.config.js如下：

module: { //module选项用来处理对应的模块
    rules: [
        {
            test: /.css$/,  //用正则匹配所有的css文件
            use: ["style-loader","css-loader"]   //使用style-loader,css-loader模块
        }
    ]
}

这样就已经可以正常打包css文件了。

## 引用其他js文件和css文件 ##

创建基本目录如下：

在a.js和b.js文件中编写测试代码，如下：

编写css文件测试代码，如下：

在main.js中引用a.js、b.js和style.css文件

最后，npm run dev开始打包文件

index.html中引入main.js文件，在浏览器中打开调试台

服务器托管 idc机房托管 spark实战高手之路第四天第十四天 webpack4

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60686.html

webpack4 高手之路第四天

摘要：配置文件中设置引入文件之前讲过在引用文件的时候可以引入和，诸如这样现在提供一种更常用和更便捷的方法。同样先在项目文件夹下安装和模块配置文件如下选项用来处理对应的模块用正则匹配所有的文件使用模块这样就已经可以正常打包文件了。配置文件中设置引入css文件之前讲过在引用css文件的时候可以引入style-loader和css=loader，诸如这样： require(style-load...

animabear 2019-08-23 15:27 评论0 收藏0
Webpack4 高手之路第二天

摘要：基础配置打包多个文件继续基础配置的内容，在目录下再新建一个文件在文件中引用开发模式进行打包同样在中引入打包后的文件打开控制台，正确输出如下引用文件在路径下新建一个目录，其下创建一个文件，内容如下在中引入文件默认情况是不支持文件的，因此需要安 Webpack 基础配置02 打包多个js文件继续Webpack 基础配置01的内容，在./src/script目录下再新建一个demo.js...

mrcode 2019-08-23 15:26 评论0 收藏0
Webpack4 高手之路第二天

摘要：基础配置打包多个文件继续基础配置的内容，在目录下再新建一个文件在文件中引用开发模式进行打包同样在中引入打包后的文件打开控制台，正确输出如下引用文件在路径下新建一个目录，其下创建一个文件，内容如下在中引入文件默认情况是不支持文件的，因此需要安 Webpack 基础配置02 打包多个js文件继续Webpack 基础配置01的内容，在./src/script目录下再新建一个demo.js...

leone 2019-08-05 18:10 评论0 收藏0
webpack4 高手之路第三天

摘要：多入口多出口初始化项目，搭建基础目录配置配置文件引入中的模块，可配置多个入口文件解决行命令的目录和不在同一个目录时造成的容错率问题，用绝对路径同样有效对应你入口文件的，也就是属性名配置以开发模式运行打包成功打包后查看输出文件，会发现 webpack4 多入口多出口初始化webpack项目，搭建基础目录showImg(https://segmentfault.com/img/bVbo...

Leo_chen 2019-08-23 15:27 评论0 收藏0
webpack4 高手之路第三天

摘要：多入口多出口初始化项目，搭建基础目录配置配置文件引入中的模块，可配置多个入口文件解决行命令的目录和不在同一个目录时造成的容错率问题，用绝对路径同样有效对应你入口文件的，也就是属性名配置以开发模式运行打包成功打包后查看输出文件，会发现 webpack4 多入口多出口初始化webpack项目，搭建基础目录showImg(https://segmentfault.com/img/bVbo...

gaara 2019-08-05 18:11 评论0 收藏0