webpack简介
webpack是一个现代的javaScript应用的静态模块打包工具。
前端模块化
- 前端模块化的一些方案:AMD、CMD、CommonJS、ES6。
- webpack其中一个核心就是让我们可以进行模块化开发,并且帮助我们处理模块间的依赖关系。
- 模块不仅仅是javaScript文件,我们的CSS、图片、json文件等在webpack中都可以被当做模块来使用。
打包
打包就是将webpack中的各种资源模块进行打包合并成一个或多个包。
webpack和grunt/gulp的对比
- grunt/gulp的核心就是Task,所以grunt/gulp被称为前端自动化任务管理工具
- 如果你的工程模块依赖非常简单,甚至是没有用到模块化的概念,只要进行简单的合并、压缩、就使用grunt\gulp即可,但是如果整个项目使用了模块化管理,而且相互依赖非常强,我们就可以使用更加强大的webpack了。
- grunt\gulp更加强调的是前端流程的自动化,模块化不是它的核心。
- webpack更加强调模块化开发管理,而文件压缩合并、预处理等功能,是他附带的功能。
webpack安装
- 安装webpack首先要安装node.js,node.js自带了软件包管理工具npm
- 全局安装webpack:npm i webpack -g
- 局部安装webapck:npm i webpack --save-dev
- 安装 npm i webpack-cli
准备工作
创建如下文件和文件夹:
- dist文件夹:用于存放之后打包的文件。
- src文件夹:用于存放我们的源文件。
- main.js:项目的入口文件。
- index.html:浏览器打开展示的首页html。
- package.json:通过npm init生成的,npm包管理的文件 。
webpack.config.js入口和出口
const path = require('path')
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
publicPath: "dist/"
},
}
package.json中定义打包
通过执行命令npm run build打包
loader的使用
1.安装style-loader负责将样式添加到DOM中:npm install --save-dev style-loader
安装css-loader负责将css文件进行加载:npm install --save-dev css-loader
- style.css
body {
background: green;
}
- webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
2.安装sass-loader负责将sass转为css:npm install sass-loader sass webpack --save-dev
- webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
"style-loader",
// 将 CSS 转化成 CommonJS 模块
"css-loader",
// 将 Sass 编译成 CSS
"sass-loader",
],
},
],
},
};
3.安装url-loader:npm install url-loader --save-dev
- webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
};
4.安装file-loader: npm install file-loader --save-dev
- webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
};
5.webpack.config.js中配置pulicPath : 'dist/'使url前面加上dist/
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
publicPath: "dist/"
},
6.图片文件处理-修改文件名称webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'img/[name].[hash:8].[ext]'
},
},
],
},
],
},
};
ES6语法处理
通过安装babel,将ES6转ES5 : npm i --save-dev babel-loader@7 babel-core babel-preset-es2015
- webpack.config.js
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
vue的使用
1.安装vue : npm i vue --save
- webpack.config.js
module.exports = {
resolve: {
alias: {
"vue$": "vue/dist/vue.esm.js",
}
}
}
- main.js
import Vue from "vue"
const app = new Vue({
el: "#app",
template: `
<div>
<h2>{{msg}}</h2>
<h2>{{name}}</h2>
</div>
`,
data: {
msg: 'hello webpack',
name: "webpack",
}
})