Webpack 入门教程3

16.如果我们需要在项目中使用CSS,那么我们就需要安装css-loader和style-loader模块

cnpm install css-loader style-loader

17.在项目的根目录中创建style.css文件,文件内容如下

echo ... > style.css

/*style.css中的文件内容*/
body{
        //设置背景色为灰色
	background: #ccc;
}

18.修改runoob1.js文件,内容如下

/*runoob1.js中的文件内容*/
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

19.使用Webpack重新打包runoob1.js为bundle.js

webpack runoob1.js bundle.js

20.在浏览器中运行index.html文件,输出内容如下

时间： 2024-10-12 16:47:56

Webpack 入门教程3的相关文章

webpack入门教程

注:本文内容比较基础,供初学者快速入门参考. 更多详细信息请参考官方文档. 本文同步发布于我的博客,欢迎关注^_^ 1. 安装 npm install -g webpack 2. 基本使用假设项目文件结构如下: /app |--index.html |--main.js |--mymodule.js index.html代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

Webpack 入门教程

Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,Webpack 可以将多种静态资源 js.css.less 转换成一个静态文件,减少了页面的请求. 接下来我们简单为大家介绍 Webpack 的安装与使用. 安装 Webpack 在安装 Webpack 前,你本地环境需要支持 node.js. 由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令

Webpack入门教程十六

84.HtmlWebpackPlugin的chunks的配置,webpack.config.js文件修改如下 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ 'Greeter':__dirname + "/app/Greeter.js", 'a':__dirname + "/app/a.js&

Webpack入门教程十七

88.在HtmlWebpackPlugin中使用excludeChunks项,修改webpack.config.js文件,修改内容如下 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ 'Greeter':__dirname + "/app/Greeter.js", 'a':__dirname + &qu

Webpack入门教程二十

102.webpack.config.js文件中entry的三种使用方式一对象形式,修改webpack.config.js文件,内容如下 module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist/js', filename:'[name].js' } } 103.使用cnpm run webpack命令重新打包 104.查看dist/js目录生成的文

Webpack入门教程二十三

113.使用for循环输出HtmlWebpackPlugin中的内容,修改模板文件index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</title&

Webpack入门教程二十四

116.输出HtmlWebpackPlugin.files中的内容,修改模板文件index.html,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</ti

Webpack入门教程二十五

119.输出HtmlWebpackPlugin.options中的内容,修改模板文件index.html,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</

Webpack入门教程二十七

126.使用同一模板文件生成不同文件且标题不同,修改webpack.config.js文件,代码如下 var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist', filename:'js/[name]-[hash].js', }

Webpack入门教程二十九

133.在模板中以内联的形式引用script脚本,修改webpack.config.js文件,代码如下 var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist', filename:'js/[name]-[hash].js',