您的位置：首页 > Web前端 > Webpack

webpack入门和基础配置

2017-07-07 11:04 555 查看

webpack安装和命令行

第一步初始化（我这里使用的是淘宝镜像cnpm）

cnpm init

第二步安装webpack

cnpm install webpack --save-dev

第三步安装处理css的loader

cnpm instal css-loader style-loader --save-dev

第四步在hello.js中引入其他文件，hello.js作为打包时的入口

require('./world.js');
require('style-loader!css-loader!./style.css');
/*
这里的loader也可以直接在命令行中写，即
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'
使用的是webpack的参数“--module-bind”
*/

第五步打包,将多个文件打包进hello.bundle.js里

webpack hello.js hello.bundle.js

一些参数

观测文件改变，自动打包

--watch

webpack hello.js hello.bundle.js --watch

打包百分比读条

--progress

webpack hello.js hello.bundle.js --progress

显示打包的模块loader

--display-modules

webpack hello.js hello.bundle.js --progress --display-modules

打包原因

--display-reasons

webpack hello.js hello.bundle.js --progress --display-modules --display-reasons

webpack基本配置

新建配置文件webpack.config.js

module.exports = {
entry: './src/js/main.js',
output: {
path: './dist/js',
filename: 'bundle.js'
}
}

在控制台中输入webpack默认会执行这个脚本，也可以指定

--config

来选择脚本

entry入口可以单个也可以多个，多个时需要打包在不同的js中。

[hash]是本次打包的哈希;

[chunkhash]是每个文件的哈希，文件内容改变时才会改变

生成项目中的html页面

首先安装

html-webpack-plugin

插件:

cnpm install html-webpack-plugin --save-dev

如何使用

//首先引入
var htmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
new htmlWebpackPlugin({
template: 'index.html', //以这个为模板生成页面
// filename: 'index-[hash].html', //为生成的html文件指定名称
filename: 'index.html',
inject: false, //规定js插入是在头部还是body把标签里，默认是body尾部，改为false时不插入
title: 'webpack is good', //设置属性，用于在模板(template)里调用
date: new Date(),
minify: {
removeComments: true, // 删除注释
collapseWhitespace: true // 删除空白
}
})
]

支持ejs模板语法，直接在html中使用

<head>
<meta charset="UTF-8">
<!--在这里调用了在webpack.config.js里设置的title-->
<title><%= htmlWebpackPlugin.options.title %></title>

<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>

</head>

<body>
<% for (var key in htmlWebpackPlugin) { %>
<%= key %>
<% } %>
</body>

生成多页面

多次使用

new htmlWebpackPlugin()

并配置相关参数。

new htmlWebpackPlugin({
template: 'index.html',
filename: 'b.html',
inject: 'body',
title: 'this is b',
// chunks: ['b'], //为该页面指定要包含的js
excludeChunks: ['a', 'c'] //为该页面指定要排除的js
}),
new htmlWebpackPlugin({
template: 'index.html',
filename: 'c.html',
inject: 'body',
title: 'this is c',
// chunks: ['c'],
excludeChunks: ['a', 'b']
})

将js直接插入页面

<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>

处理项目中的资源文件

什么是loader

处理资源文件的工具，

特性：1.可以是串联的，2.可以是同步或是异步的，3.可以接受参数，4.可以通过正则表达式来指定要处理的文件类型，等等

传递参数：

可以用require的方式：

require("url-loader?minetype=image/png!./file.png")

也可以在配置文件中添加

query

{
test: /\.png$/,
loader: "url-loader",
query: { mimetype: "image/png" }
}

注意：最新版本的webpack，不让简写loader，所以必须加上“-loader”

使用babel-loader转换ES6

安装babel-loader和babel-core

cnpm install babel-loader babel-core babel-preset-latest --save-dev

指定presets的方式（任选一）：

1. 可以在webpack.config.js中配置

loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['latest'] // 告诉babel如何去处理我们的ES6，以哪个版本的ES6规则来处理，这里的lastest是所有的版本
}
}
]

可以在项目的根目录下建立babel的配置文件（.babelrc）

.babelrc

{
"presets": ["latest"]
}

直接在package.json中配置

{
"name": "webpack-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel": {
"presets": ["latest"]
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-latest": "^6.24.0",
"css-loader": "^0.27.3",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.15.0",
"webpack": "^2.2.1"
}
}

在这里我们决定选第一种。

提高打包速度：

exclude: './node_modules/', // 不处理在这个文件夹里的ES6文件，即指定不打包的范围
include: path.resolve(__dirname, 'src/'), // 指定打包的范围，必须是绝对路径

使用css-loader处理css

安装css-loader和style-loader

cnpm install css-loader style-loader --save-dev

自动添加前缀

cnpm install postcss-loader autoprefixer --save-dev

处理css中的@import

cnpm install postcss-import --save-dev

配置

{
test: /\.css$/,
use: ['style-loader', 'css-loader?importLoaders=1', {
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('postcss-import'), // 处理css中的@import
require('autoprefixer')  // 自动添加浏览器前缀
];
}
}
}]
}

使用less-loader处理less

安装less和less-loader

cnpm install less less-loader --save-dev

配置

{
test: /\.css$/,
use: ['style-loader', 'css-loader?importLoaders=1', {
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('postcss-import'), // 处理css中的@import
require('autoprefixer')  // 自动添加浏览器前缀
];
}
}
}, 'less-loader']
}

使用sass-loader处理scss

安装node-sass和sass-loader

cnpm install node-sass sass-loader --save-dev

配置

{
test: /\.sass$/,
use: ['style-loader', 'css-loader?importLoaders=1', {
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('postcss-import'), // 处理css中的@import
require('autoprefixer')  // 自动添加浏览器前缀
];
}
}
}, 'sass-loader']
}

处理模板文件

安装html-loader

cnpm install html-loader ejs-loader --save-dev

配置

{
test: /\.html$/,
loader: "html-loader"
},
{
// test: /\.ejs$/,
test: /\.tpl$/,
loader: "ejs-loader"
}

处理图片以及其他文件

安装file-loader

cnpm install file-loader url-loader image-webpack-loader --save-dev

在模板中如何引用图片

<div class="layer">
<img src="${ require('../../assets/0.jpg') }" />
<div> this is a <%= name %> layer </div>
<% for (var i = 0; i < arr.length; i++) {  %>
<%= arr[i] %>
<% } %>
</div>

使用file-loader

{
test: /\.(png|jpg|git|svg)$/i,
loader: "file-loader",
query: {
name: 'assets/[name]-[hash:5].[ext]'
}
}

使用url-loader

{
test: /\.(png|jpg|git|svg)$/i,
loader: "url-loader",
query: {
name: 'assets/[name]-[hash:5].[ext]',
limit: 40000 // 40k ，当图片小于40k时，被打包成base64
}
}

使用image-webpack-loader压缩图片

{
test: /\.(png|jpg|git|svg)$/i,
loaders: [
"url-loader?limit=10000&name=assets/[name]-[hash:5].[ext]",
"image-webpack-loader"  // 压缩图片
]
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webpack

相关文章推荐

新的分享

章节导航