前端工程化--webpack4.x的基本配置--打包基本资源、ES6转换、热更新
2018-01-10 20:41
806 查看
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
此篇文章针对前端工程化过程中,所需的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
相关文章推荐
- webpack基本配置及打包操作
- webpack基本打包配置流程
- webpack配置:打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源
- vue-cli中的webpack打包配置
- React + WebPack 多入口打包配置
- vue+webpack解决css引用图片打包后找不到资源文件的问题
- webpack4.x开发环境配置
- 优化单页面开发环境:webpack与react的运行时打包与热更新
- 关于网页开发webpack基本配置.
- webpack-dev-server 热更新 配置
- webpack + vuejs(都是1.0的版本) 基本配置(一)
- 使用webpack打包ThinkPHP的资源文件
- 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
- [转] webpack热更新配置小结
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
- 16.如何做到webpack打包vue项目后,可以修改配置文件
- webpack实战——(2)基本配置
- webpack安装与基本配置
- webpack配置打包后图片路径出错的解决
- Webpack基本配置介绍