Webpack

最新推荐文章于 2023-10-18 10:19:23 发布

天枢dubhe

最新推荐文章于 2023-10-18 10:19:23 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏：软件

本文链接：https://blog.youkuaiyun.com/qq_27048639/article/details/78968496

软件专栏收录该内容

45 篇文章

订阅专栏

#简介
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

#教程
http://www.runoob.com/w3cnote/webpack-tutorial.html

#预装环境
node.js

#安装webpack
cnpm install webpack -g

#1、创建一个目录 app
mkdir app

#2、app下新建js、html文件

#3、js、html添加内容，html引用js代码

#runoob1.js
document.write("It works.");

#index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

#4、webpack 命令来打包
webpack runoob1.js bundle.js

#5、运行index.html

#webpack只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用 loader 进行转换
#6、使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
cnpm install css-loader style-loader
#执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader

#7、创建一个 style.css 文件

#style.css
body {
background: yellow;
}

#8、修改runoob1.js
#runoob1.js
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

#9、执行第四第五步

#10、安装插件
cnpm install webpack --save-dev

#11、配置方式打包
#webpack.config.js
var webpack=require('webpack');

module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins:[
new webpack.BannerPlugin('菜鸟教程 webpack 实例')
]
};

#12、新的打包方式
webpack --progress --colors

#13、安装服务
cnpm install webpack-dev-server -g

#14、服务启动
webpack-dev-server --progress --colors