一、建立简单的项目目录

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 前端构建的更多相关文章

  1. webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  2. webpack前端构建工具学习总结(二)之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  3. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  4. webpack前端构建angular1.0!!!

    webpack前端构建angular1.0 Webpack最近很热,用webapcak构建react,vue,angular2.0的文章很多,但是webpack构建angualr1.0的文章找来找去也 ...

  5. webpack前端构建工具学习总结(三)之webpack.config.js配置文件

    Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...

  6. 如何用webpack实现自动化的前端构建工作流

    什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,cs ...

  7. 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

    .table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...

  8. webpack前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 本人最 ...

  9. webpack进阶构建项目(一)

    webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...

随机推荐

  1. UOJ264 【NOIP2016】蚯蚓

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  2. BZOJ1912 [Apio2010]patrol 巡逻

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  3. BZOJ1018 [SHOI2008]堵塞的交通traffic

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  4. CMD.EXE中dir超长字符串缓冲区溢出原理学习

    最近看逍遥的<网络渗透攻击与安防修炼>讲到CMD命令窗口的dir传超长字符串溢出的例子.自己实验了一下,的确会产生程序崩溃,但是具体什么原理没太详细说,这里做一下原理探究,权当学习笔记了. ...

  5. jdbc工具类封装

    封装 package util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepared ...

  6. 感受身边app

    第一款:高考小秘书.http://www.liqucn.com/rj/519571.shtml.下载链接.我认为产品最大的优势在于对高考生非常有利,实用价值大,对于每年的高考生来说,高考资讯和大学资讯 ...

  7. RNN 入门教程 Part 2 – 使用 numpy 和 theano 分别实现RNN模型

    转载 - Recurrent Neural Networks Tutorial, Part 2 – Implementing a RNN with Python, Numpy and Theano 本 ...

  8. MySql中时间比较的实现

        unix_timestamp 函数可以接受一个参数,也可以不使用参数.它的返回值是一个无符号的整数.不使用参数,它返回自1970年1月1日0时0分0秒到现在所经过的秒数,如果 使用参数,参数的 ...

  9. 《JavaScript权威指南》学习笔记 第六天 开始学习DOM了。

    昨天学习了window对象的一些方法.window对象主要是针对当前视窗的操作.window对象提供了一些列API来帮助我们了解当前窗口的信息.例如history对象可以让我们获取浏览历史.nvaig ...

  10. BZOJ3224 普通平衡树

    传送门: Treap 版本: //OJ 1999 //by Cydiater //2016.8.30 #include <iostream> #include <cstdio> ...