webpack
关注
分享
扫一扫
UIEngineer
玩中学！
展开
-
webpack安装和命令行
实例一： 1.建立目录mkdir webpackDemo2.初始化cnpmcnpm install3.安装webpackcnpm install webpack --save-dev4.新建hello.js文件，function hello(str){ alert(str);}用webpack打包hello.js文件webpack hello.js hello.bundle.js这段代码原创 2017-10-18 20:04:18 · 721 阅读 · 0 评论 -
webpack - 自动化生成项目中的html页面(中)
接webpack - 自动化生成项目中的html页面(上)1.如果我们需要在html-webpack-plugin插件中传参数，在模板中根目录下的index.html模板中引用怎么办？我们可以在webpack.config.js文件中写入这么一行代码：title:'webpack is good' webpack.config.js代码如下：var htmlWebpackPlugin = requ原创 2017-10-29 14:46:32 · 1729 阅读 · 0 评论 -
建立项目的webpack配置文件
1.在当前目录下新建2个文件夹 mkdir src mkdir dist(存放静态资源的文件夹)2.在当前目下新建index.html文件，引入打包后的bundle.js文件<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" c原创 2017-10-19 20:56:13 · 713 阅读 · 0 评论 -
webpack配置的entry和output new
接《建立项目的webpack配置文件》一文。1.webpack除了单文件打包之外，也可以执行多文件打包合并，webpack.config.js代码如下：module.exports = { entry:['./src/script/main.js','./src/script/a.js'], //打包入口文件，使用数组形式 output:{ pat原创 2017-10-23 20:00:03 · 547 阅读 · 0 评论 -
webpack - 自动化生成项目中的html页面(上)
1.安装插件html-webpack-plugin 在终端输入命令如下： cnpm install html-webpack-plugin –save-dev2.进入webpack.config.js，加入一行代码，引用该插件，var htmlWebpackPlugin = require('html-webpack-plugin');同时写入plugins属性，对插件进行初始化plugins:原创 2017-10-26 19:42:37 · 9339 阅读 · 0 评论 -
webpack小案例0
步骤 首先，install Webpack 和 webpack-dev-server.cnpm i webpack webpack-dev-server -g接下来就可以进行demo演示了.webpack-dev-server用浏览器访问 http://127.0.0.1:8080.什么是webpack？ Webpack 是前端的打包工具类类似于 Grunt and...原创 2018-07-30 12:09:24 · 308 阅读 · 0 评论 -
webpack小案例1 - 单文件入口
webpack入口文件会打包成bundle.js 例子：main.js是单入口文件// main.jsdocument.write('<h1>Hello World</h1>');index.html<script src="./dist//bundle.js"></script>webpack.config.js...原创 2018-07-30 12:17:49 · 260 阅读 · 0 评论 -
webpack小案例1 - 多入口文件
多个入口文件，实用于多个页面的应用 main1.js// main.jsdocument.write('<h1>Hello World</h1>');main2.js// main.jsdocument.write('<h2>Hello Webpack</h2>');index.html<script sr...原创 2018-07-30 12:23:54 · 429 阅读 · 0 评论 -
手动配置webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。现在框架对于webpack都进行了集成，但是作为开发的我们，应该手动配置webpack，以此对其打包编译原理有更详细的认识。最简单的webpack配置webpack四个核心概念：入口(entry)入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构...原创 2019-04-03 12:00:07 · 288 阅读 · 0 评论