/** * DEVELOPMENT WEBPACK CONFIGURATION */ const fs = require('fs'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); const argv = require('minimist')(process.argv.slice(2)); // PostCSS plugins const cssnext = require('postcss-cssnext'); const postcssFocus = require('postcss-focus'); const postcssReporter = require('postcss-reporter'); const plugins = [ new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading ]; const isAdmin = process.env.IS_ADMIN === 'true'; // Build the `index.htm file` if (isAdmin) { plugins.push(new HtmlWebpackPlugin({ favicon: 'admin/src/favicon.ico', inject: true, // Inject all files that are generated by webpack, e.g. bundle.js templateContent: templateContent(), // eslint-disable-line no-use-before-define })); } const appPath = isAdmin ? path.join(process.cwd(), 'admin', 'src', 'app.js') : path.join(process.cwd(), 'node_modules', 'strapi-helper-plugin', 'lib', 'src', 'app.js'); const logger = require('../../server/logger'); const pkg = require(path.resolve(process.cwd(), 'package.json')); const dllPlugin = pkg.dllPlugin; const pluginId = pkg.name.replace(/^strapi-/i, ''); const port = argv.port || process.env.PORT || 3000; module.exports = require('./webpack.base.babel')({ // Add hot reloading in development entry: [ `webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr`, appPath, ], // Don't use hashes in dev mode for better performance output: { filename: '[name].js', chunkFilename: '[name].chunk.js', publicPath: `http://127.0.0.1:${port}/`, }, // Add development plugins plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define // Transform our own .scss files cssLoaders: [{ loader: 'style-loader', }, { loader: 'css-loader', options: { localIdentName: `${pluginId}[local]__[path][name]__[hash:base64:5]`, modules: true, importLoaders: 1, sourceMap: true, }, }, { loader: 'postcss-loader', options: { config: { path: path.resolve(__dirname, '..', 'postcss', 'postcss.config.js'), }, }, }, { loader: 'sass-loader', }], // Process the CSS with PostCSS postcssPlugins: [ postcssFocus(), // Add a :focus to every :hover cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS... browsers: ['last 2 versions', 'IE > 10'], // ...based on this browser list }), postcssReporter({ // Posts messages from plugins to the terminal clearMessages: true, }), ], // Tell babel that we want presets and to hot-reload babelPresets: [ [ require.resolve('babel-preset-latest'), { es2015: { modules: false, }, }, ], require.resolve('babel-preset-react'), require.resolve('babel-preset-stage-0'), require.resolve('babel-preset-react-hmre'), ], // Emit a source map for easier debugging devtool: 'cheap-module-eval-source-map', }); /** * Select which plugins to use to optimize the bundle's handling of * third party dependencies. * * If there is a dllPlugin key on the project's package.json, the * Webpack DLL Plugin will be used. Otherwise the CommonsChunkPlugin * will be used. * */ function dependencyHandlers() { // Don't do anything during the DLL Build step if (process.env.BUILDING_DLL) { return []; } // If the package.json does not have a dllPlugin property, use the CommonsChunkPlugin if (!dllPlugin) { return [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', children: true, minChunks: 2, async: true, }), ]; } const dllPath = dllPlugin.path; /** * If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json * Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude */ if (!dllPlugin.dlls) { const manifestPath = path.resolve(dllPath, 'strapiPluginDeps.json'); if (!fs.existsSync(manifestPath)) { logger.error('The DLL manifest is missing. Please run `npm run build:dll`'); process.exit(0); } return [ new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require(manifestPath), // eslint-disable-line global-require }), ]; } // If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them. const dllManifests = Object.keys(dllPlugin.dlls).map((name) => path.join(dllPath, `/${name}.json`)); return dllManifests.map((manifestPath) => { if (!fs.existsSync(path)) { if (!fs.existsSync(manifestPath)) { logger.error(`The following Webpack DLL manifest is missing: ${path.basename(manifestPath)}`); logger.error(`Expected to find it in ${dllPath}`); logger.error('Please run: npm run build:dll'); process.exit(0); } } return new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require(manifestPath), // eslint-disable-line global-require }); }); } /** * We dynamically generate the HTML content in development so that the different * DLL Javascript files are loaded in script tags and available to our application. */ function templateContent() { const html = fs.readFileSync( path.resolve(process.cwd(), 'admin/src/index.html') ).toString(); return html; }