Giter Club home page Giter Club logo

Comments (4)

cheungseol avatar cheungseol commented on July 20, 2024

resolve

  1. 不再支持 root 属性， modules 属性取而代之

  2. extensions 中不再需要配置空字符串

common.config

resolve: {
                root: [process.cwd() + '/client', process.cwd() + '/node_modules'],
                extensions: ['', '.js', '.jsx', '.scss'],
                alias: {
                    utils: path.resolve(__dirname, './client/utils/')
                }
            },

cache 属性的更改待确定

 resolve: {
                modules: [
                    process.cwd() + '/client', process.cwd() + '/node_modules'
                ],
                extensions: ['.js', '.jsx', '.scss'],
                alias: {
                    utils: path.resolve(__dirname, './client/utils/')
                }
            },

from cheungseol.github.io.

cheungseol avatar cheungseol commented on July 20, 2024

module

  1. "loader"的名称需要补全后缀“-loader”

  2. loaders 属性更名为

common.config

module: {
                loaders: [{
                    test: /\.js$/,
                    loaders: process.env.NODE_ENV == 'production' && ['happypack/loader?id=jsPack'] || ['babel?cacheDirectory=true'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.less$/,
                    loaders: ['style', 'css', 'less'],
                    include: __dirname
                }, {
                    test: /\.scss$/,
                    loaders: ['style', 'css', 'sass'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.css$/,
                    loaders: ['style', 'css'],
                    include: __dirname
                }, {
                    test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff|woff2)$/,
                    loaders: ['url?limit=8192'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff|woff2)$/,
                    loaders: ['file?name=[name].[ext]?[hash]'],
                    exclude: /node_modules/,
                    include: __dirname
                },{
                    test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                    loader: 'url-loader?limit=50000&name=[path][name].[ext]'
                }]
            },

升级后：

            module: {
                rules: [{
                    test: /\.js$/,
                    loaders: process.env.NODE_ENV === 'production' && ['happypack/loader?id=jsPack'] || ['babel-loader?cacheDirectory=true'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader'],
                    include: __dirname
                }, {
                    test: /\.scss$/,
                    loaders: ['style-loader', 'css-loader', 'sass-loader'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.css$/,
                    loaders: ['style-loader', 'css-loader'],
                    include: __dirname
                }, {
                    test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff|woff2)$/,
                    loaders: ['url?limit=8192'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff|woff2)$/,
                    loaders: ['file-loader?name=[name].[ext]?[hash]'],
                    exclude: /node_modules/,
                    include: __dirname
                },{
                    test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                    loader: 'url-loader?limit=50000&name=[path][name].[ext]'
                }]
            },

from cheungseol.github.io.

cheungseol avatar cheungseol commented on July 20, 2024

plugins

删除以下两个的使用，新版本webpack 已经默认支持

new webpack.optimize.DedupePlugin(),
config.plugins.unshift(new webpack.optimize.OccurenceOrderPlugin());

happypack 配置删除cacheContext属性，新版本happypack 已不再支持配置该属性：

 new happypack({
                     id: 'jsPack',
                     loaders: ['babel?cacheDirectory=true'],
                     loaders: ['babel-loader?cacheDirectory=true'],
                     threadPool: happyPackPool,
                    // cacheContext: {
                    //   env: process.env.NODE_ENV
                    // }
	
                 }),

from cheungseol.github.io.

cheungseol avatar cheungseol commented on July 20, 2024

plugins

DllPlugin 和 DllReferencePlugin

这两个插件的配置需要在不同的文件中。
DllPlugin 负责生成 DllReferencePlugin 需要用到的 manifest 文件。

package.json 中增加：

"webpack.dll": "export BABEL_ENV=production && webpack --config dll.reference.js --colors --profile --display-modules",

DllPlugin配置文件：

var webpack = require('webpack');
var path = require('path');

module.exports = {
	entry: {
		lib: ['react', 'react-dom', 'react-router', 'moment', 'react-redux', 'antd']
	},
	output: {
		path: path.resolve(__dirname, 'server/public/js/lib'),
        filename: '[name].js',
        library: '[name]'
	},
	plugins: [
		new webpack.DllPlugin({
			path: './manifest.json',
			name: '[name]',
			context: path.resolve(__dirname, 'client/')
		})
	],
	cache: true
}

DllReferencePlugin 配置

plugins: [
               // ...
                new webpack.DllReferencePlugin({
                    context: path.resolve(__dirname, 'client/'),
                    manifest: require('./manifest.json'),
                })
            ],

from cheungseol.github.io.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.