webpack 使用
安装
Hello,world
使用npm 初始化项目
创建一个新文件夹,命名为
entry
,在命令行中进入这个文件夹,使用npm init
命令对项目设置初始化:在出现的name
等设置中,可以自行设置,也可以一路回车.结束之后会在entry
文件夹内发现package.json
文件,内容即是:
{
"name": "entry",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
为此项目集成webpack
项目初始化已经完成,现在需要把webpack添加进来:在命令行中输入
npm install webpack --save-dev
命令行会对webpack
进行安装,安装完成后在package.json
文件夹中就会看到新增加了几行内容:{ ...... "author": "WangSen", "license": "ISC", // 下面是新增加的部分 "devDependencies": { "webpack": "^3.10.0" } }
同时,
entry
文件夹中也新增了node_modules
文件夹,主要是为webpack提供依赖.Hello,world
现在需要具体使用webpack来将
Hello,world
输出到页面中来.首先,在entry
文件夹根目录下创建src
文件夹,在此文件夹下创建app.js
文件,这个文件内容为输出Hello,World
到页面中去:var root = document.getElementById('root'); root.textContent = 'Hello,World';
在
entry
文件夹下创建dist
文件夹,此文件夹下创建index.html
文件,用于展示界面:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>entryPage</title> </head> <body> <div id='root'></div> <script src="bundle.js"></script> </body> </html>
为什么会引入的是
bundle.js
下文会有解释.既然准备工作都做好了,就是用webpack进行编译吧.在命令行中输入
webpack ./src/app.js ./dist/bundle.js
可以看到 webapck的编译语法是webpack {初始文件目录} {转化后的文件目录}
,这也是我们为什么在index.html
文件中引入的是bundle.js
而不是src
文件夹下的app.js
. 回车确认后:
打开dist
文件夹下的index.html
文件,即可以看到 Hello,World
.
webpack.config.js 配置 webpack
使用webpack.config.js
配置 webpack
在实际使用webpack中,我们往往不会使用webpack {入口文件} {输出文件}
这样的命令来运行webpack,毕竟很繁琐.所以我们需要使用webpack.config.js
来配置一些设置.
首先是在entry
根目录中创建 webpack.config.js
:
module.exports = {
entry: './src/app.js',
output: {
filename: './dist/bundle.js'
}
};
可以看到我们设置了入口文件entry:...
以及目标文件output: {...}
,这样设置之后,我们在命令行中,输入webpack
就可以回车了,因为webpack会去寻找webpack.config.js
文件,并读取内容,根据内容做出相应处理.刷新此前打开的index.html
文件,依然可以看到内容正确显示.
在配置完webpack.config.js
文件之后,我们又想到开发环境和生产环境的异同,难道都要用webpack
命令来解决么?显然是不可能的,所以我们现在要去配置package.json
文件:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// --watch 持续监听文件的更改,-d包含source maps 调试时候定位到源文件
"dev": "webpack -d --watch",
// -p 生产环境对代码进行压缩
"prod": "webpack -p"
},
// 实际文件中需要去掉注释
使用 npm run dev
以及 npm run prod
.将这些命令集合在package.json
中主要是为了维护以及简洁.
插件的使用
配置第一个插件
webpack中支持很多不同功能的插件,在具体的项目中需要安装不同的插件,这里安装html-webpack-plugin
插件来进行演示:
在上文中,我们在dist
文件夹下创建了index.html
文件,作为网站的根文件.但是,我们也发现了问题,里面已经写入了bundle.js
的引入,如果js文件动态变化,我们就需要更改index.html,那就太麻烦了.这时,就需要html-webpack-plugin
这个插件来发挥作用了.
进入插件github主页,查看具体使用 等信息,
安装:npm install html-webpack-plugin --save-dev
,安装成功后,在package.json
中会有显示此插件的名称以及版本号.
使用: 把dist/index.html
文件删除,使用html-webpack-plugin
插件来自动生成,更改webpack.config.js
文件:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
可以看到我们引入了此插件,并在plugins
属性下实例化了此插件(并未进行设置),在命令行中运行npm run dev
,可以看到dist
文件夹下生成了index.html文件(由于我们之前的设置,现在打开index.html
文件会有问题,但这个不重要).
进一步使用: 通过查看这个插件的文档,我们可以知道这个插件有很多设置:
plugins: [new HtmlWebpackPlugin({
// 设置网页title
title: "entryPage",
// 设置网页模板
template: "./src/index.html",
// 哈希,为了更好的cache
hash: true
})]
还有其他设置,在官方文档里.
使用 loader
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。也就是说 loader
可以把 Scss 转化成 CSS, 把TypeScript 转化成 JavaScript等.
我们就先来使用css-loader 和 style-loader 处理 CSS:
首先准备好内容src/app.css
body {
background: gray;
}
然后在src/app.js
中引入 此样式文件:import css from './app.css'
,
再安装loader使其能够处理css文件:npm install css-loader style-loader --save-dev
并在webpack.config.js
中配置:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {...},
// 添加一下设置
module: {
rules:[
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
},
plugins: [new HtmlWebpackPlugin({...})]
};
在进行编译npm run dev
之后打开 index.html文件,可以看到样式已经运用上了.
也可以使用sass-loader
将 SASS转化为CSS:
也是安装npm install sass-loader node-sass --save-dev
,设置:
// webpack.config.js
module: {
rules:[
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
// 添加scss编译方案
{
test:/\.scss$/,
use: ['style-loader', 'css-loader','sass-loader']
}
]
},
有时候我们需要把css文件编译后放入一个css文件中,而不是写入js文件中,这就需要extract-text-webpack-plugin
把CSS分离成文件了
还是 查看文档 安装npm install extract-text-webpack-plugin --save-dev
,配置:
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
...
module: {
rules:[
...
{
test:/\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: "entryPage",
template: "./src/index.html",
hash: true
}),
// 将style.css文件输出到`dist/css/style.css`
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('css/style.css')
}
})
]
};
更多关于此插件的配置,查看文档.
重新编译后,可以看到dist
文件夹下多了一个style.css
文件.
webpack-dev-server构建本地服务器
开发过程中,需要不断地修改代码,不能每次都手动刷新,这时我们需要实时监听我们代码的修改,并自动刷新的组件.