webpack 前端构建
一、建立简单的项目目录
1、创建 manager 根目录(作为项目根目录)
2、执行 npm init,在根目录manager下自动生成 package.json文件
3、npm install webpack --save-dev,在项目中安装 webpack npm包
4、在根目录下 创建 webpack.config.js,所有的配置代码都写在里面
5、在根目录创建 src 目录,包含 html目录 > index.html,css目录 > index.css,js目录 > index.js,images目录 > index...
如图:
二、配置webpack.config.js文件
1、简单配置及使用
module.exports = {
entry: {
'js/index': './src/js/index.js'
},
output: {
path: './build',
filename: '[name].js'
}
};
执行构建命令:./node_modules/webpack/bin/webpack.js
ok,生成下图的目录结构了
2、安装,使用html-webpack-plugin插件
上一步我们通过构建,在根目录下生成了 ./build/js/index.js 文件,我们希望 生成 ./build/html/index.html 文件
首先安装一下插件 npm install html-webpack-plugin --save-dev,再来看看我们的配置代码
var HtmlWebpackPlugin = require('html-webpack-plugin');
var plugins = []; plugins.push(
new HtmlWebpackPlugin({
template: './src/html/index.html',
filename: 'html/index.html',
inject: 'body',
hash: true, // index.js?hash
cache: true, // if true (default) try to emit the file only if it was changed.
showErrors: true, // if true (default) errors details will be written into the html page.
chunks: ['js/index'] // filter chunks
})
); module.exports = {
entry: {
'js/index': './src/js/index.js'
},
output: {
path: './build',
filename: '[name].js'
},
plugins: plugins
};
执行构建命令:./node_modules/webpack/bin/webpack.js后
打开./build/html/index.html文件,发现html中自动加上了script标签,引用的js路径加上了hash值,是不是感觉很赞
<script type="text/javascript" src="../js/index.js?f5f204be195973d9d81c"></script>
构建后的项目目录如图:
3、配合babel编译器,让我们所写的js代码支持es6语法
babel官网地址:https://babeljs.io/
安装babel编译器
npm install --save-dev babel-loader babel-core
npm install --save-dev babel-preset-es2015
在根目录下创建 .babelrc 配置文件
{
"presets": ["es2015"]
}
webpack.config.js配置如下:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var plugins = [];
var loaders = [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{ test: /\.css$/, loader: "style-loader!css-loader" }
]; plugins.push(
new HtmlWebpackPlugin({
template: './src/html/index.html',
filename: 'html/index.html',
inject: 'body',
hash: true, // index.js?hash
cache: true, // if true (default) try to emit the file only if it was changed.
showErrors: true, // if true (default) errors details will be written into the html page.
chunks: ['js/index'] // filter chunks
})
); module.exports = {
entry: {
'js/index': './src/js/index.js'
},
output: {
path: './build',
filename: '[name].js'
},
module: {
loaders: loaders
},
plugins: plugins
};
准备好了,我们在 ./src/js/index.js文件中写入:
function testEs6(a, ...args) {
console.log(args); // [2,3,4]
} testEs6(1,2,3,4); console.log(Set);
console.log(Map); new Promise(function(resolve, reject) {});
执行构建命令:./node_modules/webpack/bin/webpack.js,OK,编译成功了,并没有报错,这意味着你可以在你的项目中使用es6了
4、css文件可以作为模块在js中被引入
npm install css-loader --save-dev
npm install style-loader --save-dev
在webpack.config.js文件中配置
var loaders = [
{ test: /\.css$/, loader: "style-loader!css-loader" }
];
在./src/js/index.js中 引入css文件
require('../css/index.css');
执行构建命令:./node_modules/webpack/bin/webpack.js,可以看到 ./src/css/index.css中的css代码 放在了./build/html/index.html文件的style标签内
5、本地服务 webpack-dev-server
npm install --save-dev webpack-dev-server
执行服务启动命令:./node_modules/.bin/webpack-dev-server --progress --host 0.0.0.0 --port 8080 --colors --inline --hot --display-error-details --content-base src/
你可以通过浏览器输入下面地址来访问你的项目:
http://0.0.0.0:8080/html
localhost:8080/html
你的ip:8080/html
ok,也可以通过配置 webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var plugins = [];
var loaders = [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{ test: /\.css$/, loader: "style-loader!css-loader" }
]; plugins.push(
new HtmlWebpackPlugin({
template: './src/html/index.html',
filename: 'html/index.html',
inject: 'body',
hash: true,
cache: true,
showErrors: true,
chunks: ['js/index']
})
); module.exports = {
entry: {
'js/index': './src/js/index.js'
},
output: {
path: './build',
filename: '[name].js'
},
devServer: {
progress: true,
host: '0.0.0.0',
port: 8080,
colors: true,
inline: true,
// hot: true,
contentBase: './src',
displayErrorDetails: true
},
module: {
loaders: loaders
},
plugins: plugins
};
配置完了后,我们 在执行命令 ./node_modules/.bin/webpack-dev-server,ok,成功了
我们随便修改一下 ./src/html/index.html代码(也可以修改css,js代码),浏览器页面将会自动刷新,实时预览,神奇吧....
6、多文件自动构建
// webpack.config.js var glob = require('glob');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var source = getSource(); var loaders = [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{ test: /\.css$/, loader: "style-loader!css-loader" }
]; var plugins = (function() {
var arr = []; source.htmlFiles.forEach(function(htmlFile) {
arr.push(
new HtmlWebpackPlugin({
template: htmlFile.pageSource,
filename: htmlFile.filename,
inject: 'body',
hash: true,
cache: true,
showErrors: true,
chunks: [htmlFile.jsChunkName]
})
);
}); return arr;
}()); module.exports = {
entry: source.entry,
output: {
path: './build',
filename: '[name].js'
},
devServer: {
progress: true,
host: '0.0.0.0',
port: 8080,
colors: true,
inline: true,
hot: true,
contentBase: './src',
displayErrorDetails: true
},
module: {
loaders: loaders
},
plugins: plugins
}; function getSource() {
var source = {
htmlFiles: [],
entry: {}
}; var pageSource = glob.sync('./src/html/*.html');
var jsSource = glob.sync('./src/js/**/*.js');
var entry = {}; // 存储 all jsSource.forEach(function(item) {
entry['js/' + path.basename(item, '.js')] = item;
}); pageSource.forEach(function(page) {
var jsChunkName = 'js/' + path.basename(page, '.html');
source.htmlFiles.push({
filename: 'html/' + path.basename(page),
pageSource: page,
jsChunkName: jsChunkName
}); source.entry[jsChunkName] = entry[jsChunkName];
}); return source;
}
ps:转载请注明出处:杨君华
webpack 前端构建的更多相关文章
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- webpack前端构建工具学习总结(二)之loader的使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...
- webpack前端构建angular1.0!!!
webpack前端构建angular1.0 Webpack最近很热,用webapcak构建react,vue,angular2.0的文章很多,但是webpack构建angualr1.0的文章找来找去也 ...
- webpack前端构建工具学习总结(三)之webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...
- 如何用webpack实现自动化的前端构建工作流
什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,cs ...
- 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上
.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...
- webpack前端自动化构建工具
博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 本人最 ...
- webpack进阶构建项目(一)
webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...
随机推荐
- CLR/.NET/C#/Visual Studio/ASP.NET各版本之间的关系(转)
由于这篇文章记录的是2015年7月,那时.net core还是叫做.net core 5 名词定义 下列这些名词,写.NET 的人一定都不陌生,但你是否有真正理解呢?如果看了我的摘要文字说明还无法理解 ...
- Integrated Circuit Intro
1.Noise Margin 不管是TTL还是CMOS Logic Level,都会有门限.如,5V CMOS的VoutH > 4.4V, VoutL <0.33V;而它对应的输入电平Vi ...
- dataGrid查询表格
waf("#Gird").dataGrid("reloadGrid") //重新发请求去装载数据 waf("#Grid").wafGrid( ...
- 数据结构算法C语言实现(九)--- 拓展:由迷宫问题引申的AI贪吃蛇
一.简述 [开发中]由于期末时间有限,而且要用到后面的最短路径(可能),所以打算小学期在实现这一部分
- Windows8远程桌面CentOS 6.5
概述: 在CentOS上安装vncserver和Windows8上安装VNC Viewer,从而可以在Windows8远程桌面到CentOS 6.5 1. 在CentOS上安装vncserver 1. ...
- 数据结构作业——brothers(二叉树)
brothers Description 给你一棵节点编号从 1 到 n 的,根节点为 1 的二叉树.然后有 q 个询问,每个询问给出一个整数表示树的节点,要求这个节点的兄弟节点数目和堂兄弟节点的数目 ...
- datatable group by
对datatable 里面的数据按某一特定的栏位进行分组并且按照某一规则 var query = from t in rate.AsEnumerable() group t by new { t1 ...
- 第二章 存储,2.2 AliCloudDB--双11商家后台数据库的基石(作者:玄惭)
2.2 AliCloudDB--双11商家后台数据库的基石 前言 2016年天猫双11购物狂欢节已经完美落下帷幕,千亿成交的背后,作为整个天猫商家后台数据库的基石,AliCloudDB是如何保障在零点 ...
- Java类集
类集就是一个动态的对象数组,是对一些实现好的数据结构进行了包装,这样在使用时就会非常方便,最重要的是类集框架本身不受对象数组长度的限制. 类集框架的主要接口
- MySQL学习笔记——多表连接和子查询
多表连接查询 # 返回的是两张表的乘积 SELECT * FROM tb_emp,tb_dept SELECT COUNT(*) FROM tb_emp,tb_dept # 标准写法,每个数据库都能这 ...