前端-打包-webpack 编译配置

Webpack 是一个前端资源加载/打包工具
安装 　　npm install webpack -g
使用 　　webpack runoob1.js bundle.js
　　　　将runoob1.js 中代码及资源输出到 bundle.js，最后一个页面上引用bundle.js即可
加载器 npm install css-loader style-loader
　　　　用于解析css文件
头注释 npm install webpack --save-dev
　　　　plugins中的配置信息在打包时会自动添加到头
配置化 app/webpack.config.js
　　　　webpack命令自动读取当前目录中的配置文件，只需要执行命令：webpack
　　　　module.exports = {
　　　　　　//1.入口
　　　　　　entry: "./runoob1.js",
　　　　　　//2.输出
　　　　　　output: {
　　　　　　　　path: __dirname,
　　　　　　　　filename: "bundle.js"
　　　　　　},
　　　　　　//3.加载器（Loader）
　　　　　　module: {
　　　　　　　　loaders: [
　　　　　　　　　　{ test: /\.css$/, loader: "style-loader!css-loader" }
　　　　　　　　]
　　　　　　},
　　　　　　//4.插件（Plugins）
　　　　　　plugins:[
　　　　　　　　new webpack.BannerPlugin('菜鸟教程 webpack 实例')
　　　　　　],
　　　　　　//5.模式development：开发环境,production：生产环境
　　　　　　mode: 'development',
　　　　};
启动方式：webpack --progress --colors --watch
　　　　编译的输出内容带有进度progress和颜色colors和自动监听watch
　　　　开启监听模式后，没有变化的模块会在编译后缓存到内存中
添加时实编译：npm install webpack-dev-server -g
　　　　webpack-dev-server会启动一个 express 静态资源 web 服务器localhost:8080并以监听模式自动运行 webpack
　　　　webpack-dev-server --progress --colors
菜鸟教程示例：
　　css:app/style.css
　　　　body {background: yellow;}
　　js2:app/runoob2.js
　　　　module.exports = "It works from runoob2.js.";
　　js1:app/runoob1.js
　　　　require("./style.css");
　　　　document.write(require("./runoob2.js"));
　　htm:app/index.html
　　　　<body>
　　　　　　<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
　　　　</body>

posted on 2020-08-18 11:08  xcc_20190625  阅读(217)  评论(0)    收藏  举报

导航