从零搭建前端开发环境（零）——基础篇：2.webpack生产与开发环境配置
2018-03-27 12:20
866 查看
接下来就要进行工程化的操作了，主要有两个目的。
对静态文件进行编译、打包、压缩、版本控制等优化操作；
构建一个便利的开发环境，比如热加载、代理等。
这里我们会用到webpack，辅以babel以及其他loader来处理js、css、图片等静态文件。对于各种loader的作用，本文会有一个大概的介绍，但不会展开说明，推荐看webpack文档来做一个详细的了解。
说明：
babel-core、babel-loader、babel-preset-env、babel-preset-stage-2，babel相关负责将js编译为es5规范，要新增.babelrc配置文件。
css-loader、style-loader，负责css的编译，webpack文档里可以找到。
postcss-loader、postcss-import、postcss-url，postcss负责给样式添加浏览器前缀的兼容（如-webkit-），要新增.postcssrc.js配置文件。
less、less-loader样式预编译，当然也可以用sass。
url-loader，负责img、font等静态文件编译。
extract-text-webpack-plugin，负责将css提取为单独的文件。
html-webpack-plugin，负责向html模板中动态写入静态文件引用。
src/index.js（所有资源都用import引入，并把方法提取到util.js文件，方便后面的内容）import { strReverse } from '@util';
import './index.less';
import logo from './assets/logo.jpg';
const $app = document.getElementById('app');
const strInput = 'Hello World';
const srtHolder = 'The result will be here...';
const strHtml = `
<img src="${logo}" alt="logo" />
<h1>${strInput}</h1>
<button id="do">Show the reverse of "${strInput}"</button>
<button id="reset">Do reset</button>
<p id="result">${srtHolder}</p>
`;
$app.innerHTML = strHtml;
const $result = document.getElementById('result');
document.getElementById('do').onclick = () => {
$result.innerHTML = `The reverse of "${strInput}" is "${strReverse(strInput)}"`;
};
document.getElementById('reset').onclick = () => {
$result.innerHTML = srtHolder;
};uti新建src/util/index.jsexport function strReverse(str) {
return str.split('').reverse().join('');
}index.html（去掉引用，webpack会自动加入）<!DOCTYPE html>
<html lang="zh">
<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>Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
config/webpack.base.jsconst path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const root = path.resolve(__dirname, '../');
module.exports = {
entry: path.resolve(root, 'src'),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
},
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'Hello World',
template: './index.html',
}),
],
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'src': path.resolve(root, 'src'),
'util': path.resolve(root, 'src/util'),
},
},
};config/webpack.dev.jsconst path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const root = path.resolve(__dirname, '../');
module.exports = webpackMerge(baseConfig, {
output: {
path: path.resolve(root, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(css|less)$/,
include: path.resolve(root, 'src'),
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
},
],
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.resolve(root, 'dist'),
port: 9000,
hot: true,
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
});config/webpack.prod.jsconst path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const root = path.resolve(__dirname, '../');
module.exports = webpackMerge(baseConfig, {
output: {
path: path.resolve(root, 'dist'),
filename: 'bundle.[chunkhash:10].js',
},
module: {
rules: [
{
test: /\.(css|less)$/,
include: path.resolve(root, 'src'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: true,
},
}, 'postcss-loader', 'less-loader'],
}),
},
],
},
devtool: '#source-map',
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
},
},
sourceMap: true,
parallel: true,
}),
new ExtractTextPlugin({
filename: 'bundle.[contenthash:10].css',
allChunks: true,
}),
],
});.babelrc{
"presets": [
["env",{ "modules": false }],
"stage-2"
]
}.postcssrc.jsmodule.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {}
}
}然后，在package.json里的scripts里加上prod和dev，分别对应生产和开发环境"scripts": {
"prod": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --config config/webpack.dev.js --open"
},
从今以后，我们想要看效果，就要点开dist/index.html文件来看了。打开试试吧。
再试试开发环境的命令$ npm run dev浏览器打开localhost:9000或127.0.0.1:9000。随便改一改js或css试试，是不是自动刷新了。这在我们开发时会比较有好一些，现在整体的环境已经有一个完整的雏形了。别忘了提交git，记录一下$ git add .
$ git commit -m 'webpack init'
package.json{
"name": "dem
926a
o",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prod": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --config config/webpack.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.1.0",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.3",
"postcss-url": "^7.3.1",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.2",
"webpack-merge": "^4.1.2"
}
}项目结构demo
|- config
|- webpack.base.js
|- webpack.dev.js
|- webpack.prod.js
|- src/
|- assets/
|- logo.jpg
|- index.css
|- index.js
|- .babelrc
|- .gitignore
|- .postcssrc.js
|- index.html
|- package.json
对静态文件进行编译、打包、压缩、版本控制等优化操作；
构建一个便利的开发环境，比如热加载、代理等。
这里我们会用到webpack，辅以babel以及其他loader来处理js、css、图片等静态文件。对于各种loader的作用，本文会有一个大概的介绍，但不会展开说明，推荐看webpack文档来做一个详细的了解。
1、安装webpack及各种loader和plugin
$ npm i -D webpack@3 webpack-dev-server@2 webpack-merge babel-core babel-loader babel-preset-env babel-preset-stage-2 css-loader style-loader less less-loader postcss-loader postcss-import postcss-url url-loader file-loader extract-text-webpack-plugin html-webpack-plugin（注：截止至笔者写作日，webpack4还不稳定，所以还是用webpack3，相应的需要webpack-dev-server@2）
说明：
babel-core、babel-loader、babel-preset-env、babel-preset-stage-2，babel相关负责将js编译为es5规范，要新增.babelrc配置文件。
css-loader、style-loader，负责css的编译，webpack文档里可以找到。
postcss-loader、postcss-import、postcss-url，postcss负责给样式添加浏览器前缀的兼容（如-webkit-），要新增.postcssrc.js配置文件。
less、less-loader样式预编译，当然也可以用sass。
url-loader，负责img、font等静态文件编译。
extract-text-webpack-plugin，负责将css提取为单独的文件。
html-webpack-plugin，负责向html模板中动态写入静态文件引用。
2、修改代码
src/index.css重命名为src/index.lesssrc/index.js（所有资源都用import引入，并把方法提取到util.js文件，方便后面的内容）import { strReverse } from '@util';
import './index.less';
import logo from './assets/logo.jpg';
const $app = document.getElementById('app');
const strInput = 'Hello World';
const srtHolder = 'The result will be here...';
const strHtml = `
<img src="${logo}" alt="logo" />
<h1>${strInput}</h1>
<button id="do">Show the reverse of "${strInput}"</button>
<button id="reset">Do reset</button>
<p id="result">${srtHolder}</p>
`;
$app.innerHTML = strHtml;
const $result = document.getElementById('result');
document.getElementById('do').onclick = () => {
$result.innerHTML = `The reverse of "${strInput}" is "${strReverse(strInput)}"`;
};
document.getElementById('reset').onclick = () => {
$result.innerHTML = srtHolder;
};uti新建src/util/index.jsexport function strReverse(str) {
return str.split('').reverse().join('');
}index.html（去掉引用，webpack会自动加入）<!DOCTYPE html>
<html lang="zh">
<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>Hello World</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
3、配置webpack、babel、postcss
webpack默认的配置文件是webpack.config.js。但是通常的，我们会在开发环境引用webpack.dev.js，生产环境用webpack.prod.js，所以我们一步到位，建立config目录，直接写webpack.prod.js，webpack.dev.js并且用webpack-merge提取出它们的公共部分webpack.base.js，方便管理。这里我们把jsx的坑先给填了，反正不影响。config/webpack.base.jsconst path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const root = path.resolve(__dirname, '../');
module.exports = {
entry: path.resolve(root, 'src'),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
},
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'Hello World',
template: './index.html',
}),
],
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'src': path.resolve(root, 'src'),
'util': path.resolve(root, 'src/util'),
},
},
};config/webpack.dev.jsconst path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const root = path.resolve(__dirname, '../');
module.exports = webpackMerge(baseConfig, {
output: {
path: path.resolve(root, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(css|less)$/,
include: path.resolve(root, 'src'),
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
},
],
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.resolve(root, 'dist'),
port: 9000,
hot: true,
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
});config/webpack.prod.jsconst path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const root = path.resolve(__dirname, '../');
module.exports = webpackMerge(baseConfig, {
output: {
path: path.resolve(root, 'dist'),
filename: 'bundle.[chunkhash:10].js',
},
module: {
rules: [
{
test: /\.(css|less)$/,
include: path.resolve(root, 'src'),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
minimize: true,
},
}, 'postcss-loader', 'less-loader'],
}),
},
],
},
devtool: '#source-map',
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
},
},
sourceMap: true,
parallel: true,
}),
new ExtractTextPlugin({
filename: 'bundle.[contenthash:10].css',
allChunks: true,
}),
],
});.babelrc{
"presets": [
["env",{ "modules": false }],
"stage-2"
]
}.postcssrc.jsmodule.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {}
}
}然后，在package.json里的scripts里加上prod和dev，分别对应生产和开发环境"scripts": {
"prod": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --config config/webpack.dev.js --open"
},
4、试运行
先试试生产环境的命令，在命令行里输入$ npm run prod可以看到，生成了一个dist文件夹，这个就是我们以后会放到生产环境的文件夹。但是！！我们之前已经把它gitignore了。这样做的目的是为了不污染线上的环境，每次上线都是在线上打包，不会出现开发时的各种开发到一半的文件。从今以后，我们想要看效果，就要点开dist/index.html文件来看了。打开试试吧。
再试试开发环境的命令$ npm run dev浏览器打开localhost:9000或127.0.0.1:9000。随便改一改js或css试试，是不是自动刷新了。这在我们开发时会比较有好一些，现在整体的环境已经有一个完整的雏形了。别忘了提交git，记录一下$ git add .
$ git commit -m 'webpack init'
5、配置展示
全部变化可看笔者的github记录，还是很清晰的。package.json{
"name": "dem
926a
o",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prod": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --config config/webpack.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.1.0",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.3",
"postcss-url": "^7.3.1",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.2",
"webpack-merge": "^4.1.2"
}
}项目结构demo
|- config
|- webpack.base.js
|- webpack.dev.js
|- webpack.prod.js
|- src/
|- assets/
|- logo.jpg
|- index.css
|- index.js
|- .babelrc
|- .gitignore
|- .postcssrc.js
|- index.html
|- package.json
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- webpack开发和生产两个环境的配置详解
- Web前端环境搭建篇之--安装配置Android开发环境
- 分离Webpack开发环境与生产环境的配置
- Webpack配置开发环境和生产环境
- webpack+搭建vue开发环境配置(二)
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- windows下vue+webpack前端开发环境搭建及nginx部署
- webpack根据开发与生产环境配置不同变量--webpack.DefinePlugin
- Windows环境搭建VUE前端开发环境-安装VUE+webpack
- webpack开发和生产两个环境的配置详解
- Aooms_基于SpringCloud的微服务基础开发平台实战_003_配置文件与简单的web环境搭建
- 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
- React+webpack开发环境的搭建_0
- React+Webpack+Webstorm开发环境搭建
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
- React+Webpack开发环境配置
- webpack学习笔记(二)环境分离+多页面开发配置
- React+webpack开发环境的搭建
- webpack4.x开发环境配置详解
- 使用webpack和babel搭建react开发环境