将webpack1升级为webpack2的一些总结 |
您所在的位置：网站首页 › webpack2升级3 › 将webpack1升级为webpack2的一些总结 |
|
/*** webpack2配置*/ var webpack = require('webpack'); var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var OpenBrowserPlugin = require('open-browser-webpack-plugin'); module.exports = { devServer: { historyApiFallback: true, contentBase: "./", quiet: false, //控制台中不输出打包的信息 noInfo: false, hot: true, //开启热点 inline: true, //开启页面自动刷新 lazy: false, //不启动懒加载 //progress: true, //显示打包的进度,webpack2中没有该配置项 watchOptions: { aggregateTimeout: 300 }, host: 'localhost', port: 8088, //设置端口号 //代理其实很简单的，只要配置这个参数就可以了 proxy: { } }, entry: [ // 'webpack/hot/dev-server', // 'webpack-dev-server/client?http://localhost:8088',webpack2注释 path.resolve(__dirname, 'src/index.js') ], output: { path: path.join(__dirname, "dist/"), filename: 'bundle.js', publicPath: '/dist/' }, module: { rules: [ { test: /\.js[x]?$/, exclude: /node_moudle/, include: path.join(__dirname, './src'), loader: 'babel-loader', options: { presets: [ "es2015", "react", "stage-2" ], "plugins": [ ["import", { "libraryName": "antd", "style": "css" }] ] } }, { test: /\.css$/, use: ['style-loader','css-loader'] }, { test: /\.(png|jpg)$/, loader: 'url-loader', options: { limit: 8129 } }, { test: /\.scss$/, use: ['style-loader','css-loader','sass-loader'] }, ] }, plugins: [ new HtmlWebpackPlugin({ title: 'webpack-demos', filename: 'dev.html', template: 'index.html', inject: 'body', minify: false, hash: false, cache: false, showErrors: false }), new OpenBrowserPlugin({ url: 'http://localhost:8088' }), new webpack.DefinePlugin({ }), new webpack.HotModuleReplacementPlugin() ], resolve: { extensions: [".js", ".json"], modules: ['node_modules'] }, devtool: 'source-map' }
将webpack1升级为webpack2的时候，总结： webpack和webpack-dev-server的版本需要更新到@2.x版本 2的devServer中配置参数有变动，例如progress被取消 entry中不需要 'webpack/hot/dev-server'和'webpack-dev-server/client?http://localhost:8088' module.loaders升级为module.rules(虽然前者依旧被保留可用，但是此处遵循2的新特性规范) 原query字段被取消，现使用options，并且使用options的地方需要配合使用loader，没有options的地方使用use 原先的加载器不强求些“-loader”，现在需要强制加上 原先的加载器可以通过“!”级连，现在不可以 原先加载器后可以使用“?***”，现在取消，统一使用options 原先的resolve.extensions[0]可以为空，现不可以 resolve.modulesDirectories字段改为resolve.modules字段
贴上相同需求下的webpack1的配置 /*** webpack1配置*/var webpack = require('webpack'); var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var OpenBrowserPlugin = require('open-browser-webpack-plugin'); module.exports = { devServer: { historyApiFallback: true, contentBase: "./", quiet: false, //控制台中不输出打包的信息 noInfo: false, hot: true, //开启热点 inline: true, //开启页面自动刷新 lazy: false, //不启动懒加载 progress: true, //显示打包的进度 watchOptions: { aggregateTimeout: 300 }, host: 'localhost', port: 8088, //设置端口号 //代理其实很简单的，只要配置这个参数就可以了 proxy: { } }, entry: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8088', path.resolve(__dirname, 'src/index.js') ], output: { path: path.join(__dirname, "dist/"), filename: 'bundle.js', publicPath: '/dist/' }, module: { loaders: [ { test: /\.js[x]?$/, exclude: /node_moudle/, include: path.join(__dirname, './src'), loader: 'babel-loader', query: { presets: [ 'es2015', 'react', 'stage-2' ] } }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpg)$/, loader: 'url-loader', query: { limit: 8129 } }, { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' }, ] }, plugins: [ new HtmlWebpackPlugin({ title: 'webpack-demos', filename: 'dev.html', template: 'index.html', inject: 'body', minify: false, hash: false, cache: false, showErrors: false }), new OpenBrowserPlugin({ url: 'http://localhost:8088' }), new webpack.DefinePlugin({ }), new webpack.HotModuleReplacementPlugin() ], resolve: { extensions: ['', '.web.js', '.js', '.jsx', '.json'], root: [ path.resolve('./src') ], modulesDirectories: ['node_modules'] }, devtool: 'source-map' }
按需加载的配置 npm install babel-plugin-import --save-dev "plugins": [ ["import", { "libraryName": "antd", "style": "css" }] ] // style: true的时候加载less
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |