Webpack是web前端当前最流行的造化构建工具．可以将前端的各种资源自动打包构建,详细说明可见官网https://doc.webpack-china.org/
此篇文章针对前端工程化过程中，所需的webpack配置做一些基本的介绍，并给出自己的一套配置,可自动化打包html、css、sass、js(支持ES6)、images，并实现热更新
一．基本安装
1. 安装node.js
官网下载地址：https://nodejs.org/en/。下载完成后傻瓜式安装。
2. 项目根目录新建package.json文件,将附2的内容复制进去.(假设你的程序放在D:/project里,那么项目根目录就是D:/project)
3. 项目根目录下若无webpack.config.js文件，新建一个空的同名文件，放在根目录中。将附1的内容复制进去
4. 项目根目录下新建.babelrc,将附3的内容复制进去.
5. 进入命令行，windows下同时按下windows+R,输入cmd，回车
进入项目目录(下面说的本地，即是进入到项目目录),比如进入D:/project下，
命令行输入 D: 回车
命令行输入cd project 回车
6. 命令行全局安装webpack:命令行输入,回车
npm i webpack -g
7. 本地安装node-sass,这个包无法实现npm安装，安装方式如下：
(1)去node-sass的github主页下载：https://github.com/sass/node-sass/releases
选择自己的操作系统的node后缀的版本,比如说，是windows32位操作系统，就下载
win32-ia32-57.node,将文件放至项目根目录
(2)命令行执行
npm i node-sass--save-dev --sass_binary_path=./win32-ia32-57.node,
这次安装完成后，以后就可以npm i -–save-dev node-sass方式安装了
8.当前目录，命令行执行 npm i
二. 如何运行,实时更新
命令行进入当前目录,执行 npm start,等命令执行结束,根据提示在浏览器中打开相应地址.即可在浏览器中看到相应的页面,此时在代码中更改html或css或js,保存后,可直接在浏览器中看到结果
三. 如何打包,线上发布
命令行进入当前目录,执行npm runbuild ,即在当前目录下生成dist目录.里面的文件即可发布
四.注意事项:
1.入口js为src/js/index.js
2.在原始的html文件中删除<src>和<link>标签
3.如何引入css文件?
在 src/js/index.js里引入
例:
import ‘../css/ normalize.css’
import ‘../css/default.css’
引入顺序影响最终css在html中引入的顺序
4.如何在入口js中引入其它js文件?
这里推荐ES6的import 和export详情可以查阅:
http://es6.ruanyifeng.com/#docs/module
五.最终实现的效果:
原始目录为 src,下面包括了大量的css和js文件
打包后为dist目录,下面包含了打包后的一个css,和一个js文件
附1:webpack.config.js内容:
const path =require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin('css/[name]-css.css');
const extractSASS = new ExtractTextPlugin('css/[name]-sass.css');
//构建前删除dist目录
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports={
entry:'./src/js/index.js',//入口JS
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'./dist')
},
module:{
rules:[
{
test:/\.css$/,
use: extractCSS.extract({
use: "css-loader",
fallback: "style-loader"
})
},
{
test:/\.scss$/,
use: extractSASS.extract({
use: [
{loader: "css-loader"},
{loader: "sass-loader"}
],
fallback: "style-loader"
})
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options:{
cacheDirectory:true//缓存
}
}
},
{ //打包css里的图片
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, //小于8KB,就base64编码
name:'img/[name].[ext]', //在哪里生成
publicPath:'../' //在生成的文件引用,前面加
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin(
{
template: './src/index.html',// 模板文件
filename: 'index.html'
}
),
new CopyWebpackPlugin([
{from:'./src/img',to:'./img'}
]),
extractCSS,
extractSASS,
new CleanWebpackPlugin(['dist','build'],{
verbose:false,
exclude:['img']//不删除img静态资源
})
]
}
附2: package.json内容
{
"name": "webpack-test",
"version": "1.0.0",
"description": "null",
"keywords": [],
"author": "py",
"scripts": {
"dev": "webpack-dev-server --mode development",
"start": "npm run dev",
"build": "webpack --mode production"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.0.6",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {}
}--ByPY
随时随地看视频
