webpack构建ant-design
一：首先在d盘下面创建一个文件夹名为webpack，在webpack下创建一个文件夹名为react，使用phpstorm打开react文件夹，打开Terminal，执行操作
npm init
初始化一下项目，生成package.json
文件
二：在文件根目录下创建文件“webpack.config.js”，在根目录下面创建一个文件夹命名为“src”，在下面创建一个文件命名为index.js,在项目中安装webpack，在Terminal中执行操作
npm install --save-dev webpack
Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖
npm install --save-dev webpack-dev-server
编写配置文件webpack.config.js
var path = require('path'); //引文文件路径
module.exports = {
entry: ['./src/index'], //入口文件
output: {
path: path.join(__dirname, 'dist'), //打包出口文件路径
filename: 'index.js' //打包文件名
},
devServer: {
//配置nodejs本地服务器，
contentBase: './dist',
hot: true //本地服务器热更新
}
}
修改package.json文件
"scripts": {
"start": "webpack"
},
在Terminal中执行
npm run start
执行打包过程
在dist文件夹中生成index.js文件
三：Webpack把所有的文件都可以当做模块处理，包括JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
CSS
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。在src目录下面添加文件main.css，并添加代码
h1{
color:red
}
在Terminal执行操作
npm install --save-dev style-loader css-loader
安装完毕之后，在webpack.config.js中添加配置
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'//添加对样式表的处理
}
]
},
在index.js文件中添加代码
require("./main.css")
执行
npm run start
打包完毕，并没有新文件生成，是由于webpack将样式文件和javascript合并到了同一个文件中去了。使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来，首先执行extract-text-webpack-plugin插件的安装操作
npm install --save-dev extract-text-webpack-plugin
插件安装完毕后，修改webpac.config.js中的配置文件为
var path = require('path'); //引文文件路径
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: ['./src/index'], //入口文件
output: {
path: path.join(__dirname, 'dist'), //打包出口文件路径
filename: 'index.js' //打包文件名
},
module: {
loaders: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
],
devServer: {
//配置nodejs本地服务器，
contentBase: './dist',
hot: true //本地服务器热更新
}
}
执行打包操作
自动生成html插件的安装，“
html-webpack-plugin
”插件可以根据模板生成html，在src下创建一个index.html文件，作为生成html的模板文件
npm install html-webpack-plugin --save-dev
修改配置文件如下
var path = require('path'); //引文文件路径 var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require('html-webpack-plugin'); var autoprefixer = require('autoprefixer'); module.exports = { entry: ['./src/index'], //入口文件 output: { path: path.join(__dirname, 'dist'), //打包出口文件路径 filename: 'index.js' //打包文件名 }, module: { loaders: [ { test: /\.css$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { importLoaders: 1, } }, { loader: 'postcss-loader' } ] }, ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: { except: ['$super', '$', 'exports', 'require'] } }), new ExtractTextPlugin("main.css"), new HtmlWebpackPlugin({ template: './src/index.html', //模板路径 filename: "index.html", inject: false, }), ], devServer: { //配置nodejs本地服务器， contentBase: './dist', hot: true //本地服务器热更新 } }
四：每次打包之前，删除上一次打包生成的文件
clean-webpack-plugin：A webpack plugin to remove/clean your build folder(s) before building（清除打包文件夹的一个插件），首先安装
npm install clean-webpack-plugin --save-dev
安装完成之后，添加配置文件
var CleanWebpackPlugin = require('clean-webpack-plugin');
new CleanWebpackPlugin(['dist'], {
root: 'd:/webpack/demo1/',
verbose: true,
dry: false,
}),
五：webpack服务配置和打包配置
webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.，在根目录下面创建一个文件名为 “webpack.config.dev.js“ 作为一个临时的服务，配置文件为：
webpack.config.dev.js
var path = require('path'); //引文文件路径
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
module.exports = {
devtool: 'source-map',
entry: ['./src/index'], //入口文件
output: {
path: path.join(__dirname, 'dist'), //打包出口文件路径
filename: 'index.js' //打包文件名
},
module: {
loaders: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
}),
new ExtractTextPlugin("main.css"),
],
devServer: {
//配置nodejs本地服务器，
contentBase: './dist',
hot: true //本地服务器热更新
}
}
在文件根目录下添加一个文件“webpack.config.prod.js”，作为打包文件，添加配置文件为
webpack.config.prod.js
var path = require('path'); //引文文件路径
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var autoprefixer = require('autoprefixer');
module.exports = {
devtool: 'source-map',
entry: ['./src/index'], //入口文件
output: {
path: path.join(__dirname, 'dist'), //打包出口文件路径
filename: 'index.js' //打包文件名
},
module: {
loaders: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
}),
new ExtractTextPlugin("main.css"),
new HtmlWebpackPlugin({
template: './src/index.html', //模板路径
filename: "index.html",
inject: false,
}),
new CleanWebpackPlugin(['dist'], {
root: 'd:/webpack/demo1/',
verbose: true,
dry: false,
}),
],
devServer: {
//配置nodejs本地服务器，
contentBase: './dist',
hot: true //本地服务器热更新
}
}
修改package.json文件
"scripts": {
"build": "webpack --config webpack.config.prod.js",
"dev": "webpack-dev-server --config webpack.config.dev.js"
},
六添加解析less样式文件的扩展
安装代码为
npm install --save-dev less-loader less
添加扩展，修改配置文件为
var path = require('path'); //引文文件路径
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: ['./src/index'], //入口文件
output: {
path: path.join(__dirname, 'dist'), //打包出口文件路径
filename: 'index.js' //打包文件名
},
module: {
loaders: [
{
//正则匹配后缀.css文件;
test: /\.css$/,
//使用html-webpack-plugin插件独立css到一个文件;
use: ExtractTextPlugin.extract({
//加载css-loader、postcss-loader（编译顺序从下往上）转译css
use: [{
loader : 'css-loader?importLoaders=1',
},
{
loader : 'postcss-loader',
//配置参数;
options: {
//从postcss插件autoprefixer 添加css3前缀;
plugins: function() {
return [
//加载autoprefixer并配置前缀,可加载更多postcss插件;
require('autoprefixer')({
browsers: ['ios >= 7.0']
})
];
}
}
}]
})
},
{//正则匹配后缀.less文件;
test: /\.less$/,
//使用html-webpack-plugin插件独立css到一个文件;
use: ExtractTextPlugin.extract({
use: [{
loader : 'css-loader?importLoaders=1',
},
{
loader : 'postcss-loader', //配置参数;
options: {
plugins: function() {
return [
require('autoprefixer')
({
browsers: ['ios >= 7.0']
})];
}
}
},
//加载less-loader同时也得安装less;
"less-loader"
]
})
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
}),
new ExtractTextPlugin({
filename :"[name].css",
}),
new HtmlWebpackPlugin({
template: './src/index.html', //模板路径
filename: "index.html",
inject: "body",
}),
//webpack内置js压缩插件;
new webpack.optimize.UglifyJsPlugin({
compress: { //压缩;
warnings: false //关闭警告;
}
}),
new CleanWebpackPlugin(['dist'], {
root: 'd:/webpack/react/',
verbose: true,
dry: false,
}),
],
devServer: {
//配置nodejs本地服务器，
contentBase: './dist',
hot: true //本地服务器热更新
},
resolve:{
//设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
extensions: [' ','.css','.scss','.sass','.less','.js','.json'],
//查找module的话从这里开始查找;
modules: [path.resolve(__dirname, "src"), "node_modules"], //绝对路径;
//别名设置,主要是为了配和webpack.ProvidePlugin设置全局插件;
alias: {
//设置全局jquery插件;
}
}
}
安装压缩图片的扩展，首先执行命令
npm install img-loader url-loader file-loader --save-dev
安装完成之后，在loaders数组中添加一条配置
{
//正则匹配后缀.png、.jpg、.gif图片文件;
test: /\.(png|jpg|gif)$/i,
use: [{//加载url-loader 同时安装 file-loader;
loader : 'url-loader',
options : {
//小于10000K的图片文件转base64到css里,当然css文件体积更大;
limit : 10000,
//设置最终img路径;
name : '/img/[name].[ext]'
}
},
{
//压缩图片(另一个压缩图片：image-webpack-loader);
loader : 'img-loader?minimize&optimizationLevel=5&progressive=true'
},]
}
在src目录下面添加一个img目录，拷贝一张图片放到img目录下，命名为img，然后，修改main.css文件如下
h1{ color:red; display: flex; background:url("./img/img.jpg"); }
然后执行以下，build，可以发现在dist目录下生成如下文件
七 支持es6，安装es6扩展，执行安装命令
npm install babel-core babel-loader babel-preset-es2015 --save-dev
安装完成之后，修改配置文件，在“loaders”数组中添加一个扩展的配置为
{
//正则匹配后缀.js文件;
test: /\.js$/,
//需要排除的目录
exclude: '/node_modules/',
//加载babel-loader转译es6
use: [{
loader: 'babel-loader',
}],
},
在根文件目录下添加文件“.babelrc”，次文件没有扩展名，可以sublime或者phpstorm等编辑器来创建，给".babelrc"文件中添加如下配置
{
"presets": ["es2015"],
"sourceMaps": true
}
配置完成之后，就可以使用es6的新语法了。打包过程中出现了提示，样式文件超过了500kb，可以使用插件“optimize-css-assets-webpack“来压缩css样式文件
安装语法如下
npm install optimize-css-assets-webpack-plugin --save-dev
修改配置文件如下
var path = require('path'); //引文文件路径
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩CSS模块;
module.exports = {
devtool: 'source-map',
entry: ['./src/index'], //入口文件
output: {
publicPath: "http://localhost:8081/", //配合devServer本地Server;
path: path.join(__dirname, 'dist'), //打包出口文件路径
filename: 'index.js' //打包文件名
},
module: {
loaders: [
{
//正则匹配后缀.js文件;
test: /\.js$/,
//需要排除的目录
exclude: '/node_modules/',
//加载babel-loader转译es6
use: [{
loader: 'babel-loader',
}],
},
{
//正则匹配后缀.css文件;
test: /\.css$/,
//使用html-webpack-plugin插件独立css到一个文件;
use: ExtractTextPlugin.extract({
//加载css-loader、postcss-loader（编译顺序从下往上）转译css
use: [{
loader : 'css-loader?importLoaders=1',
},
{
loader : 'postcss-loader',
//配置参数;
options: {
//从postcss插件autoprefixer 添加css3前缀;
plugins: function() {
return [
//加载autoprefixer并配置前缀,可加载更多postcss插件;
require('autoprefixer')({
browsers: ['ios >= 7.0']
})
];
}
}
}]
})
},
{//正则匹配后缀.less文件;
test: /\.less$/,
//使用html-webpack-plugin插件独立css到一个文件;
use: ExtractTextPlugin.extract({
use: [{
loader : 'css-loader?importLoaders=1',
},
{
loader : 'postcss-loader', //配置参数;
options: {
plugins: function() {
return [
require('autoprefixer')
({
browsers: ['ios >= 7.0']
})];
}
}
},
//加载less-loader同时也得安装less;
"less-loader"
]
})
},
{
//正则匹配后缀.png、.jpg、.gif图片文件;
test: /\.(png|jpg|gif)$/i,
use: [{//加载url-loader 同时安装 file-loader;
loader : 'url-loader',
options : {
//小于10000K的图片文件转base64到css里,当然css文件体积更大;
limit : 10000,
//设置最终img路径;
name : '/img/[name].[ext]'
}
},
{
//压缩图片(另一个压缩图片：image-webpack-loader);
loader : 'img-loader?minimize&optimizationLevel=5&progressive=true'
},]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
}),
new ExtractTextPlugin({
filename :"[name].css",
}),
new HtmlWebpackPlugin({
template: './src/index.html', //模板路径
filename: "index.html",
inject: "body",
}),
//webpack内置js压缩插件;
new webpack.optimize.UglifyJsPlugin({
compress: { //压缩;
warnings: false //关闭警告;
}
}),
new CleanWebpackPlugin(['dist'], {
root: 'd:/webpack/react/',
verbose: true,
dry: false,
}),
//压缩css（注:因为没有用style-loader打包到js里所以webpack.optimize.UglifyJsPlugin的压缩本身对独立css不管用）;
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g, //正则匹配后缀.css文件;
cssProcessor: require('cssnano'), //加载‘cssnano’css优化插件;
cssProcessorOptions: { discardComments: {removeAll: true } }, //插件设置,删除所有注释;
canPrint: true //设置是否可以向控制台打日志,默认为true;
}),
],
devServer: {
//配置nodejs本地服务器，
contentBase: './dist',
hot: true //本地服务器热更新
},
resolve:{
//设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
extensions: [' ','.css','.scss','.sass','.less','.js','.json'],
//查找module的话从这里开始查找;
modules: [path.resolve(__dirname, "src"), "node_modules"], //绝对路径;
//别名设置,主要是为了配和webpack.ProvidePlugin设置全局插件;
alias: {
//设置全局jquery插件;
}
}
}
八 安装react
在终端输入
npm install --save-dev react react-dom
同时安装React和React-DOM，标准的React组件后缀名为.jsx，而.jsx是默认不被浏览器所支持的；所以需要一个转换器，将不被浏览器识别的.jsx文件转换成浏览器能够正常运行的文件，这个转换器就是Babel
用npm一次性安装这些依赖包
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
在webpack.config.js中，修改配置文件如下
{
//正则匹配后缀.js 和.jsx文件;
test: /\.(js|jsx)$/,
//需要排除的目录
exclude: '/node_modules/',
//加载babel-loader转译es6
use: [{
loader: 'babel-loader',
}],
},
修改.babelrc文件添加如下代码：
"presets": [
"react",
"es2015"
],
在src->component目录下新建一个Component.jsx文件（注意首字母一定要大写），使用ES6语法返回一个React组件，代码如下
//Component1.jsx
import React from 'react';
class Component1 extends React.Component {
render() {
return (
<div>Hello World!</div>
)
}
}
//导出组件
export default Component1;
在index.js中使用ES6的语法，定义和渲染Component1模块，将React组件渲染至html的标签中：
import React from 'react';
import ReactDom from 'react-dom';
import Component1 from './component/Component1';
ReactDom.render(
<Component1 />,
document.getElementById('root')
);
执行一下 run npm build和run npm dev，在浏览器中查看127.0.0.1:8081 输出"hello world"
九 执行 npm run dev，浏览器自行打开浏览器，安装插件
npm install open-browser-webpack-plugin --save-dev
修改“webpack.config.dev.js”的配置为
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'./src/index'
],
output: {
publicPath: "http://localhost:8081/",
path: path.join(__dirname, 'build'),
filename: 'index.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin("styles.css"),
new OpenBrowserPlugin({ url: 'http://localhost:8081' }),
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
}
,{
test: /\.js$/,
loaders: ['babel-loader'],
exclude:/node_modules/
},{
test: /\.json$/,
loader: "json-loader"
},{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
},]}
]
},
devServer: {
contentBase: './build',
hot: true,
host: '127.0.0.1',
port: '8081'
}
}
十 安装 ant-design ui开发环境
推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处，npm安装语句为
npm install antd --save
在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css，这里通过 “babel-plugin-import”来引用扩展文件，首先安装扩展
npm install babel-plugin-import --save-dev
然后修改 “.bablerc”的配置项如下
{
"presets": [
"es2015",
"react"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
],
"sourceMaps": true
}
最后添加一个ant-design 控件来进行测试，在index.js文件中添加如下代码
import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, message } from 'antd';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: '',
};
}
handleChange(date) {
message.info('您选择的日期是: ' + date.toString());
this.setState({ date });
}
render() {
return (
<div style={{ width: 400, margin: '100px auto' }}>
<DatePicker onChange={value => this.handleChange(value)} />
<div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
执行build的程序，然后执行dev，查看到的结果如图
十一：最后我的文件目录如图所示
其中“webpack.config.prod.js“配置如下
const path = require('path'); //引文文件路径
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const glob = require('glob'); // glob模块，用于读取webpack入口目录文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩CSS模块;
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;//处理trunk
const entries = getEntry('src/**/*.js', 'src/**/');
const config = {
devtool: 'source-map',
entry: entries,
output: {
publicPath: "http://localhost:8081/", //配合devServer本地Server;
path: path.join(__dirname, 'build'), //打包出口文件路径
filename: "[name].js",
},
module: {
loaders: [
{
//正则匹配后缀.js文件;
test: /\.(js|jsx)$/,
//需要排除的目录
exclude: '/node_modules/',
//加载babel-loader转译es6
use: [{
loader: 'babel-loader',
}],
},
{
//正则匹配后缀.css文件;
test: /\.css$/,
//使用html-webpack-plugin插件独立css到一个文件;
use: ExtractTextPlugin.extract({
//加载css-loader、postcss-loader（编译顺序从下往上）转译css
use: [{
loader : 'css-loader?importLoaders=1',
},
{
loader : 'postcss-loader',
//配置参数;
options: {
//从postcss插件autoprefixer 添加css3前缀;
plugins: function() {
return [
//加载autoprefixer并配置前缀,可加载更多postcss插件;
require('autoprefixer')({
browsers: ['ios >= 7.0']
})
];
}
}
}]
})
},
{//正则匹配后缀.less文件;
test: /\.less$/,
//使用html-webpack-plugin插件独立css到一个文件;
use: ExtractTextPlugin.extract({
use: [{
loader : 'css-loader?importLoaders=1',
},
{
loader : 'postcss-loader', //配置参数;
options: {
plugins: function() {
return [
require('autoprefixer')
({
browsers: ['ios >= 7.0']
})];
}
}
},
//加载less-loader同时也得安装less;
"less-loader"
]
})
},
{
//正则匹配后缀.png、.jpg、.gif图片文件;
test: /\.(png|jpg|gif)$/i,
use: [{//加载url-loader 同时安装 file-loader;
loader : 'url-loader',
options : {
//小于10000K的图片文件转base64到css里,当然css文件体积更大;
limit : 10000,
//设置最终img路径;
name : '/img/[name].[ext]'
}
},
{
//压缩图片(另一个压缩图片：image-webpack-loader);
loader : 'img-loader?minimize&optimizationLevel=5&progressive=true'
},]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
}),
new CommonsChunkPlugin({
name: 'vendors',
minChunks: Infinity
}),
new ExtractTextPlugin({
filename :"[name].css",
}),
// new HtmlWebpackPlugin({
// template: './src/index.html', //模板路径
// filename: "index.html", //输出名字
// inject: "body", //打包文件插入模板的位置
// }),
//webpack内置js压缩插件;
new webpack.optimize.UglifyJsPlugin({
compress: { //压缩;
warnings: false //关闭警告;
}
}),
new CleanWebpackPlugin(['build'], {
root: 'd:/webpack/react/', //要删除文件的绝对路径
verbose: true,
dry: false,
}),
//压缩css（注:因为没有用style-loader打包到js里所以webpack.optimize.UglifyJsPlugin的压缩本身对独立css不管用）;
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g, //正则匹配后缀.css文件;
cssProcessor: require('cssnano'), //加载‘cssnano’css优化插件;
cssProcessorOptions: { discardComments: {removeAll: true } }, //插件设置,删除所有注释;
canPrint: true //设置是否可以向控制台打日志,默认为true;
}),
],
devServer: {
//配置nodejs本地服务器，
contentBase: './dist',
hot: true //本地服务器热更新
},
resolve:{
//设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
extensions: [' ','.css','.scss','.sass','.less','.js','.json'],
//别名设置,主要是为了配和webpack.ProvidePlugin设置全局插件;
alias: {
//设置全局jquery插件;
}
}
};
var pages = Object.keys(getEntry('src/**/*.js', 'src/**/'));
pages.forEach(function(pathname) {
console.log(pathname);
var conf = {
filename: pathname + '.html', //生成的html存放路径，相对于path
template: 'src/index.html', //html模板路径
inject:false,
};
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
function getEntry(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry);
extname = path.extname(entry);
basename = path.basename(entry, extname);
pathname = path.normalize(path.join(dirname, basename));
pathDir = path.normalize(pathDir);
if(pathname.startsWith(pathDir)){
pathname = pathname.substring(pathDir.length)
}
entries[pathname] = ['./' + entry];
}
return entries;
}
