webpack的基本使用

webpack的基本使用

webpack 的 基本语法

webpack main.js build.js

入口文件 main.js 自动加载依赖

输出文件 build.js

使用 webpack.config.js进行命令的简化处理

webpack.config.js

默认配置文件，webpack会自动去找这个文件

// 默认配置文件，webpack.config.js
// 执行，webpack自动找 webpack.config.js 内容进行相关内容的打包操作

module.exports = {
entry: './main.js', // webpack 要打包的源文件 是 main.js
output: {
filename: './build.js'  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下
}
}

之后直接执行

webpack

就行了, webpack 会自己去找到 webpack.config.js 中的内容进行相应的打包工作

webpack 打包 css， (style-loader,css-loader)

webpack 本身是不支持 css 打包的，所以需要加载依赖

style-loader

css-loader

cnpm init

初始化一个 package.json文件

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

利用package.json 进行管理依赖

下次可以直接利用

cnpm install

进行依赖安装

注意： 在webpack.config.js 中配置下style-loader 和 css-loader，且有顺序要求，必须是先 style-loader 再 css-loader

webpack.config.js

// 默认配置文件，webpack.config.js
// 执行，webpack自动找 webpack.config.js 内容进行相关内容的打包操作

module.exports = {
entry: './main.js', // webpack 要打包的源文件 是 main.js
output: {
filename: './build.js',  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下
path: './dist'
},
module: {
// rules 也可以使用 rules 代替 loaders
loaders: [
{
test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理
// 如果写成 style!css 或者 css-loader!style-loader 都会报错
loader:'style-loader!css-loader'
}
]
}
}

autoprefixer-loader 兼容性处理包

autoprefixer-loader 作用： 自动在打包的过程中将css写法加上不同浏览器的前缀达到兼容不同浏览器的效果。

使用步骤：

1. 安装

cnpm install autoprefixer-loader --save-dev

2. webpack.config.js中添加autoprefixer-loader, 注意要放在style-loader和css-loader后面

module.exports = {
entry: './main.js', // webpack 要打包的源文件 是 main.js
output: {
filename: './build.js',  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下
path: './dist'
},
module: {
// rules 也可以使用 rules 代替 loaders
loaders: [
{
test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理
// 如果写成 style!css 或者 css-loader!style-loader 都会报错
loader:'style-loader!css-loader!autoprefixer-loader'
}
]
}
}

webpack 打包 less

步骤：

1. 安装：

cnpm install less-loader less --save-dev

， style-loader, css-loader之前已经安装过了，也是必须的

2. 在

webpack.config.js

中添加 less-loader

module.exports = {
entry: './main.js', // webpack 要打包的源文件 是 main.js
output: {
filename: './build.js',  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下
path: './dist'
},
module: {
// rules 也可以使用 rules 代替 loaders
loaders: [
// 处理 css
{
test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理
loader:'style-loader!css-loader!autoprefixer-loader'
},
// 处理 less
{
test: /\.less$/,   // 所有 .less 结尾的文件都被此loader 处理
loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
}
]
}
}

webpack 打包 sass

步骤

1. 安装依赖包 style-loader, css-loader, sass-loader, node-sass

2. 配置webpack.config.js 文件

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

loaders: [
// 处理 css
{
test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理
loader:'style-loader!css-loader!autoprefixer-loader'
},
// 处理 less
{
test: /\.less$/,   // 所有 .less 结尾的文件都被此loader 处理
loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
},
// 处理 sass
{
test: /\.scss$/,   // 所有 .scss 结尾的文件都被此loader 处理
loader:'style-loader!css-loader!autoprefixer-loader!sass-loader'
}
]

利用 webpack 来打包图片

步骤：

1. 安装依赖

url-loader

,

file-loader

,

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

2. 将

url-loader

,

file-loader

配置到 webpack.config.js 文件中

webpack.config.js

// 默认配置文件，webpack.config.js
// 执行，webpack自动找 webpack.config.js 内容进行相关内容的打包操作

module.exports = {
entry: './main.js', // webpack 要打包的源文件 是 main.js
output: {
filename: './build.js',  // 打包后输出的文件名称, ./build.js 表示输出到当前目录下
path: './dist'
},
module: {
// rules 也可以使用 rules 代替 loaders
loaders: [
{
test: /\.css$/,   // 所有 .css 结尾的文件都被此loader 处理
loader:'style-loader!css-loader!autoprefixer-loader'
},
{
test: /\.(png|jpg)$/,  // 匹配文件的后缀名是 .png 或者 .jpg
loader: 'url?limit=20000' // url就是url-loader的缩写，表示图片大小小于20000，
// 就将这张图片编译成base64的字符串使用，否则就把图片打包编译到文件夹中
// 这里注意 限制的 值不能太大，太大会导致build.js 文件过大，影响性能
}
]
}
}

利用 url-loader 完成字体图标的解析

在loader中加入 ttf文件的解析，url-loader可以解析 png，jpg，ttf等文件，需要其他文件可以自行添加扩展名

module: {
loaders: [
{
test: /\.css$/,
loader:'style-loader!css-loader!autoprefixer-loader'
},
{
test: /\.(png|jpg|ttf)$/,  // 匹配文件的后缀名是 .png 或者 .jpg 或者 ttf
loader: 'url?limit=20000'
}
]
}

webpack-plugin 实现页面刷新和自动打包

webpack server 解决项目打包图片路径问题

步骤：

1. 安装：

cnpm install webpack webpack-dev-server --save-dev

2.

webpack-dev-server --inline --hot --open --port 3008

（浏览器自动刷新 –inline， 热编译 –hot, 端口打开在 3008 ）

3. 这个指令这么长，想缩短，就在package.json配置

{
...,
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 3008"
},
"author": "",
"license": "ISC"
}

配置完成之后

npm run dev

就可以运行了

安装html-webpack-plugin

html-webpack-plugin可以实现自动生成一个index.html 页面存在内存中，只有这样，webpack-dev-server才能保证页面的实时刷新实时打包

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

然后配置

webpack.config.js

var HtmlwebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/main.js',
output: {
filename: './build.js',
path: './dist'
},
module: {
loaders: [
{
test: /\.css$/,
loader:'style-loader!css-loader!autoprefixer-loader'
},
{
test: /\.(png|jpg|ttf)$/,
loader: 'url?limit=20000'
}
]
},
plugins: [
new HtmlwebpackPlugin({
title: "index",  //"生成的页面标题"
filename: "index.html", // 生成的文件名称
template: "1.html" // 根据 1.html 这个模板文件来生成
})
]
}

利用 babel-loader等包实现 es6 转 es5

// require('../statics/css/site.css');
// require 对于 es6 的语法
import '../statics/css/site.css';

为什么要转换，因为浏览器不认识import

步骤：

安装相应依赖包

cnpm install babel-core –save-dev

cnpm install babel-loader –save-dev

cnpm install babel-preset-es2015 –save-dev （转码器）

在webpack.config.js中的loaders:[] 中配置

( 1 )第一种

{
test:/\.js$/,
loader: 'babel?presets[]=es2015'
}

( 2 ) 第二种，利用 webpack.config.js 中的 babel 这个属性来配置会更好

使用第二种还需要安装一个依赖

cnpm install babel-plugin-transform-runtime –save-dev

var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: './build.js',
path: './dist'
},
module: {
loaders: [
{
test: /\.css$/, loader:'style-loader!css-loader!autoprefixer-loader'
},
{
test: /\.(png|jpg|ttf)$/,
loader: 'url?limit=20000'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/  //表示所有 node_modules文件夹下的不进行 load
}
]
},
plugins: [
new HtmlwebpackPlugin({
title: "index",  //"生成的页面标题"
filename: "index.html", // 生成的文件名称
template: "1.html" // 根据 1.html 这个模板文件来生成
})
],
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']  // 实时转换，保证编译 vue文件时,也能正常编译转换
}
}