updated to webpack 4
This commit is contained in:
Danny Coates
parent
b76899a353
commit
ebf6bda467
|
|
@ -9,6 +9,7 @@ import storage from './storage';
|
|||
import metrics from './metrics';
|
||||
import experiments from './experiments';
|
||||
import Raven from 'raven-js';
|
||||
import './main.css';
|
||||
|
||||
if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) {
|
||||
Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,5 @@
|
|||
const html = require('choo/html');
|
||||
/*
|
||||
The current weback config uses package.json to generate
|
||||
version.json for /__version__ meaning `require` returns the
|
||||
string 'version.json' in the frontend context but the json
|
||||
on the server.
|
||||
|
||||
We want `version` to be constant at build time so this file
|
||||
has a custom loader (/build/version_loader.js) just to replace
|
||||
string with the value from package.json. 🤢
|
||||
*/
|
||||
const version = require('../../../package.json').version || 'VERSION';
|
||||
const version = require('../../../package.json').version;
|
||||
const browser = browserName();
|
||||
|
||||
module.exports = function(state) {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ function merge(m1, m2) {
|
|||
}
|
||||
|
||||
module.exports = function(source) {
|
||||
const localeExp = this.options.locale || /([^/]+)\/[^/]+\.ftl$/;
|
||||
const localeExp = /([^/]+)\/[^/]+\.ftl$/;
|
||||
const result = localeExp.exec(this.resourcePath);
|
||||
const locale = result && result[1];
|
||||
if (!locale) {
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
const commit = require('git-rev-sync').short();
|
||||
|
||||
module.exports = function(source) {
|
||||
const pkg = JSON.parse(source);
|
||||
const version = {
|
||||
commit,
|
||||
source: pkg.homepage,
|
||||
version: process.env.CIRCLE_TAG || `v${pkg.version}`
|
||||
};
|
||||
return `module.exports = '${JSON.stringify(version)}'`;
|
||||
};
|
||||
|
|
@ -12,13 +12,9 @@ This loader enumerates all the files in `assets/` so that `common/assets.js` can
|
|||
|
||||
This loader enumerates all the ftl files in `public/locales` so that the fluent loader can create it's js files.
|
||||
|
||||
## Package.json Loader
|
||||
## Version Plugin
|
||||
|
||||
This loader creates a `version.json` file that gets exposed by the `/__version__` route from the `package.json` file and current git commit hash.
|
||||
|
||||
## Version Loader
|
||||
|
||||
This loader substitutes the string "VERSION" for the version string specified in `package.json`. This is a workaround because `package.json` already uses the `package_json_loader`. See [app/templates/header/index.js](../app/templates/header/index.js) for more info.
|
||||
Creates a `version.json` file that gets exposed by the `/__version__` route from the `package.json` file and current git commit hash.
|
||||
|
||||
# See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
const version = require('../package.json').version;
|
||||
|
||||
module.exports = function(source) {
|
||||
return source.replace('VERSION', version);
|
||||
};
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
const commit = require('git-rev-sync').short();
|
||||
const pkg = require('../package.json');
|
||||
|
||||
const version = JSON.stringify({
|
||||
commit,
|
||||
source: pkg.homepage,
|
||||
version: process.env.CIRCLE_TAG || `v${pkg.version}`
|
||||
});
|
||||
|
||||
class VersionPlugin {
|
||||
apply(compiler) {
|
||||
compiler.hooks.emit.tap('VersionPlugin', compilation => {
|
||||
compilation.assets['version.json'] = {
|
||||
source() {
|
||||
return version;
|
||||
},
|
||||
size() {
|
||||
return version.length
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = VersionPlugin;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
const genmap = require('../build/generate_asset_map');
|
||||
const isServer = typeof genmap === 'function';
|
||||
const prefix = isServer ? '/' : '';
|
||||
const prefix = '';
|
||||
let manifest = {};
|
||||
try {
|
||||
//eslint-disable-next-line node/no-missing-require
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const gen = require('../build/generate_l10n_map');
|
||||
|
||||
const isServer = typeof gen === 'function';
|
||||
const prefix = isServer ? '/' : '';
|
||||
const prefix = '';
|
||||
let manifest = {};
|
||||
try {
|
||||
// eslint-disable-next-line node/no-missing-require
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
83
package.json
83
package.json
|
|
@ -12,7 +12,7 @@
|
|||
"prepush": "npm test",
|
||||
"check": "nsp check",
|
||||
"clean": "rimraf dist",
|
||||
"build": "npm run clean && webpack && webpack --config webpackSw.config.js",
|
||||
"build": "npm run clean && webpack",
|
||||
"lint": "npm-run-all lint:*",
|
||||
"lint:css": "stylelint app/*.css app/**/*.css",
|
||||
"lint:js": "eslint .",
|
||||
|
|
@ -30,7 +30,8 @@
|
|||
"test:frontend": "cross-env NODE_ENV=development node test/frontend/runner.js && nyc report --reporter=html",
|
||||
"test-integration": "docker-compose up --abort-on-container-exit --exit-code-from integration-tests --build --remove-orphans --quiet-pull && docker-compose down",
|
||||
"test-integration-stage": "cross-env BASE_URL=https://send.stage.mozaws.net npm run test-integration",
|
||||
"start": "npm run clean && cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.config.js",
|
||||
"start": "npm run clean && cross-env NODE_ENV=development webpack-dev-server --mode=development",
|
||||
"dev": "webpack-serve",
|
||||
"prod": "node server/bin/prod.js"
|
||||
},
|
||||
"lint-staged": {
|
||||
|
|
@ -55,84 +56,84 @@
|
|||
"node": ">=8.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@dannycoates/webpack-dev-server": "^3.1.4",
|
||||
"asmcrypto.js": "^0.22.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-istanbul": "^4.1.5",
|
||||
"babel-plugin-yo-yoify": "^1.0.2",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-plugin-istanbul": "^4.1.6",
|
||||
"babel-plugin-yo-yoify": "^2.0.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"babel-preset-stage-3": "^6.24.1",
|
||||
"base64-js": "^1.2.3",
|
||||
"copy-webpack-plugin": "^4.5.0",
|
||||
"cross-env": "^5.1.3",
|
||||
"css-loader": "^0.28.10",
|
||||
"base64-js": "^1.3.0",
|
||||
"copy-webpack-plugin": "^4.5.2",
|
||||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^1.0.0",
|
||||
"css-mqpacker": "^6.0.2",
|
||||
"eslint": "^4.18.2",
|
||||
"eslint": "^4.19.1",
|
||||
"eslint-plugin-mocha": "^4.12.1",
|
||||
"eslint-plugin-node": "^6.0.1",
|
||||
"eslint-plugin-security": "^1.4.0",
|
||||
"expose-loader": "^0.7.4",
|
||||
"extract-loader": "^1.0.2",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"expose-loader": "^0.7.5",
|
||||
"extract-loader": "^2.0.1",
|
||||
"fast-text-encoding": "^1.0.0",
|
||||
"file-loader": "^1.1.11",
|
||||
"fluent-intl-polyfill": "^0.1.0",
|
||||
"git-rev-sync": "^1.10.0",
|
||||
"git-rev-sync": "^1.12.0",
|
||||
"github-changes": "^1.1.2",
|
||||
"html-loader": "^0.5.5",
|
||||
"http_ece": "^1.0.5",
|
||||
"husky": "^0.14.3",
|
||||
"lint-staged": "^7.0.0",
|
||||
"mocha": "^5.0.4",
|
||||
"lint-staged": "^7.2.0",
|
||||
"mini-css-extract-plugin": "^0.4.1",
|
||||
"mocha": "^5.2.0",
|
||||
"nanobus": "^4.3.2",
|
||||
"nanotiming": "^7.3.0",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"nanotiming": "^7.3.1",
|
||||
"npm-run-all": "^4.1.3",
|
||||
"nsp": "^3.2.1",
|
||||
"nyc": "^11.5.0",
|
||||
"nyc": "^11.9.0",
|
||||
"postcss-cssnext": "^3.1.0",
|
||||
"postcss-import": "^11.1.0",
|
||||
"postcss-loader": "^2.1.1",
|
||||
"prettier": "^1.11.1",
|
||||
"postcss-loader": "^2.1.5",
|
||||
"prettier": "^1.13.7",
|
||||
"proxyquire": "^1.8.0",
|
||||
"puppeteer": "^1.1.1",
|
||||
"raven-js": "^3.23.1",
|
||||
"puppeteer": "^1.5.0",
|
||||
"raven-js": "^3.26.3",
|
||||
"redis-mock": "^0.21.0",
|
||||
"require-from-string": "^2.0.1",
|
||||
"require-from-string": "^2.0.2",
|
||||
"rimraf": "^2.6.2",
|
||||
"sinon": "^4.4.2",
|
||||
"sinon": "^4.5.0",
|
||||
"string-hash": "^1.1.3",
|
||||
"stylelint": "^9.1.1",
|
||||
"stylelint": "^9.3.0",
|
||||
"stylelint-config-standard": "^18.2.0",
|
||||
"stylelint-no-unsupported-browser-features": "^2.0.0",
|
||||
"stylelint-no-unsupported-browser-features": "^3.0.0",
|
||||
"svgo": "^1.0.5",
|
||||
"svgo-loader": "^2.1.0",
|
||||
"testpilot-ga": "^0.3.0",
|
||||
"val-loader": "^1.1.0",
|
||||
"val-loader": "^1.1.1",
|
||||
"web-streams-polyfill": "^1.3.2",
|
||||
"webpack": "^3.11.0",
|
||||
"webpack-dev-middleware": "^2.0.6",
|
||||
"webpack-dev-server": "2.9.1",
|
||||
"webpack-manifest-plugin": "^1.3.2",
|
||||
"webpack": "^4.15.1",
|
||||
"webpack-cli": "^3.0.8",
|
||||
"webpack-dev-middleware": "^3.1.3",
|
||||
"webpack-manifest-plugin": "^2.0.3",
|
||||
"webpack-unassert-loader": "^1.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mattiasbuelens/web-streams-adapter": "0.1.0-alpha.1",
|
||||
"aws-sdk": "^2.206.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"aws-sdk": "^2.266.1",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"choo": "^6.10.0",
|
||||
"choo": "^6.12.1",
|
||||
"cldr-core": "^32.0.0",
|
||||
"convict": "^4.0.1",
|
||||
"express": "^4.16.2",
|
||||
"convict": "^4.3.1",
|
||||
"express": "^4.16.3",
|
||||
"express-ws": "^4.0.0",
|
||||
"fluent": "^0.6.3",
|
||||
"fluent": "^0.6.4",
|
||||
"fluent-langneg": "^0.1.0",
|
||||
"helmet": "^3.12.0",
|
||||
"helmet": "^3.12.1",
|
||||
"mkdirp": "^0.5.1",
|
||||
"mozlog": "^2.2.0",
|
||||
"raven": "^2.4.2",
|
||||
"raven": "^2.6.3",
|
||||
"redis": "^2.8.0",
|
||||
"websocket-stream": "^5.1.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ const express = require('express');
|
|||
const expressWs = require('express-ws');
|
||||
const config = require('../config');
|
||||
|
||||
const wsapp = express();
|
||||
expressWs(wsapp, null, { perMessageDeflate: false });
|
||||
wsapp.ws('/api/ws', require('../routes/ws'));
|
||||
wsapp.listen(8081, config.listen_address);
|
||||
|
||||
module.exports = function(app, devServer) {
|
||||
const wsapp = express();
|
||||
expressWs(wsapp, null, { perMessageDeflate: false });
|
||||
wsapp.ws('/api/ws', require('../routes/ws'));
|
||||
wsapp.listen(8081, config.listen_address);
|
||||
|
||||
assets.setMiddleware(devServer.middleware);
|
||||
locales.setMiddleware(devServer.middleware);
|
||||
routes(app);
|
||||
|
|
|
|||
|
|
@ -66,7 +66,8 @@ module.exports = function(state, body = '') {
|
|||
|
||||
${firaTag}
|
||||
<script defer src="/jsconfig.js"></script>
|
||||
<script defer src="${assets.get('runtime.js')}"></script>
|
||||
<!--<script defer src="${assets.get('runtime.js')}"></script>-->
|
||||
<script defer src="${assets.get('style.js')}"></script>
|
||||
<script defer src="${assets.get('vendor.js')}"></script>
|
||||
<script defer src="${locales.get(state.locale)}"></script>
|
||||
<script defer src="${assets.get('cryptofill.js')}"></script>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const express = require('express');
|
|||
const devRoutes = require('../../server/bin/test');
|
||||
const app = express();
|
||||
|
||||
const wpm = middleware(webpack(config), { logLevel: 'silent' });
|
||||
const wpm = middleware(webpack(config()), { logLevel: 'silent' });
|
||||
app.use(wpm);
|
||||
devRoutes(app, { middleware: wpm });
|
||||
|
||||
|
|
|
|||
|
|
@ -2,38 +2,29 @@ const path = require('path');
|
|||
const webpack = require('webpack');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const IS_DEV = process.env.NODE_ENV === 'development';
|
||||
const VersionPlugin = require('./build/version_plugin');
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
const regularJSOptions = {
|
||||
const webJsOptions = {
|
||||
babelrc: false,
|
||||
presets: [['env', { modules: false }], 'stage-2'],
|
||||
// yo-yoify converts html template strings to direct dom api calls
|
||||
plugins: ['yo-yoify']
|
||||
};
|
||||
|
||||
const entry = {
|
||||
const web = {
|
||||
target: 'web',
|
||||
entry: {
|
||||
// babel-polyfill and fluent are directly included in vendor
|
||||
// because they are not explicitly referenced by app
|
||||
vendor: ['babel-polyfill', 'fluent'],
|
||||
app: ['./app/main.js'],
|
||||
style: ['./app/main.css']
|
||||
};
|
||||
|
||||
if (IS_DEV) {
|
||||
entry.tests = ['./test/frontend/index.js'];
|
||||
// istanbul instruments the source for code coverage
|
||||
regularJSOptions.plugins.push('istanbul');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
entry,
|
||||
app: ['./app/main.js']
|
||||
},
|
||||
output: {
|
||||
filename: '[name].[chunkhash:8].js',
|
||||
filename: '[name].[hash:8].js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
publicPath: '/'
|
||||
},
|
||||
devtool: IS_DEV && 'inline-source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
|
|
@ -50,17 +41,6 @@ module.exports = {
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// inlines version from package.json into header/index.js
|
||||
include: require.resolve('./app/templates/header'),
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: regularJSOptions
|
||||
},
|
||||
'./build/version_loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
// fluent gets exposed as a global so that each language script
|
||||
// can load independently and share it.
|
||||
|
|
@ -89,7 +69,7 @@ module.exports = {
|
|||
path.resolve(__dirname, 'node_modules/fluent-intl-polyfill'),
|
||||
path.resolve(__dirname, 'node_modules/intl-pluralrules')
|
||||
],
|
||||
options: regularJSOptions
|
||||
options: webJsOptions
|
||||
},
|
||||
{
|
||||
// Strip asserts from our deps, mainly choojs family
|
||||
|
|
@ -129,28 +109,15 @@ module.exports = {
|
|||
{
|
||||
// creates style.css with all styles
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: { modules: false, importLoaders: 1 }
|
||||
},
|
||||
'postcss-loader'
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
// creates version.json for /__version__ from package.json
|
||||
test: require.resolve('./package.json'),
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: 'version.json'
|
||||
importLoaders: 1
|
||||
}
|
||||
},
|
||||
'extract-loader',
|
||||
'./build/package_json_loader'
|
||||
'postcss-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -164,6 +131,7 @@ module.exports = {
|
|||
}
|
||||
},
|
||||
'extract-loader',
|
||||
'babel-loader',
|
||||
'./build/fluent_loader'
|
||||
]
|
||||
},
|
||||
|
|
@ -184,6 +152,17 @@ module.exports = {
|
|||
}
|
||||
]
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
cacheGroups: {
|
||||
style: {
|
||||
name: 'style',
|
||||
test: /\.css$/,
|
||||
chunks: 'all'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new CopyPlugin([
|
||||
{
|
||||
|
|
@ -194,22 +173,16 @@ module.exports = {
|
|||
new webpack.IgnorePlugin(/dist/), // used in common/*.js
|
||||
new webpack.IgnorePlugin(/require-from-string/), // used in common/locales.js
|
||||
new webpack.HashedModuleIdsPlugin(),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'vendor',
|
||||
minChunks: ({ resource }) => /node_modules/.test(resource)
|
||||
}),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'runtime'
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
filename: 'style.[contenthash:8].css'
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].[contenthash:8].css'
|
||||
}),
|
||||
new VersionPlugin(),
|
||||
new ManifestPlugin() // used by server side to resolve hashed assets
|
||||
],
|
||||
devServer: {
|
||||
compress: true,
|
||||
hot: false,
|
||||
host: '0.0.0.0',
|
||||
before: IS_DEV ? require('./server/bin/dev') : undefined,
|
||||
proxy: {
|
||||
'/api/ws': {
|
||||
target: 'ws://localhost:8081',
|
||||
|
|
@ -219,3 +192,30 @@ module.exports = {
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
const serviceWorker = {
|
||||
target: 'webworker',
|
||||
entry: {
|
||||
serviceWorker: './app/serviceWorker.js'
|
||||
},
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
publicPath: '/'
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
// TODO: why are styles not output in 'production' mode?
|
||||
const mode = 'development' //argv.mode || 'production';
|
||||
console.error(`mode: ${mode}`);
|
||||
web.mode = serviceWorker.mode = mode;
|
||||
if (mode === 'development') {
|
||||
web.devtool = 'inline-source-map';
|
||||
web.devServer.before = require('./server/bin/dev');
|
||||
web.entry.tests = ['./test/frontend/index.js'];
|
||||
// istanbul instruments the source for code coverage
|
||||
webJsOptions.plugins.push('istanbul');
|
||||
}
|
||||
return [web, serviceWorker]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,226 +0,0 @@
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const IS_DEV = process.env.NODE_ENV === 'development';
|
||||
|
||||
const regularJSOptions = {
|
||||
babelrc: false,
|
||||
presets: [['env', { modules: false }], 'stage-2'],
|
||||
// yo-yoify converts html template strings to direct dom api calls
|
||||
plugins: ['yo-yoify']
|
||||
};
|
||||
|
||||
const entry = {
|
||||
// babel-polyfill and fluent are directly included in vendor
|
||||
// because they are not explicitly referenced by app
|
||||
vendor: ['babel-polyfill', 'fluent'],
|
||||
app: ['./app/main.js'],
|
||||
style: ['./app/main.css'],
|
||||
serviceWorker: ['./app/serviceWorker.js']
|
||||
};
|
||||
|
||||
if (IS_DEV) {
|
||||
entry.tests = ['./test/frontend/index.js'];
|
||||
// istanbul instruments the source for code coverage
|
||||
regularJSOptions.plugins.push('istanbul');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
entry,
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
publicPath: '/'
|
||||
},
|
||||
devtool: IS_DEV && 'inline-source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
oneOf: [
|
||||
{
|
||||
include: [require.resolve('./assets/cryptofill')],
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[hash:8].[ext]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// inlines version from package.json into header/index.js
|
||||
include: require.resolve('./app/templates/header'),
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: regularJSOptions
|
||||
},
|
||||
'./build/version_loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
// fluent gets exposed as a global so that each language script
|
||||
// can load independently and share it.
|
||||
include: [path.dirname(require.resolve('fluent'))],
|
||||
use: [
|
||||
{
|
||||
loader: 'expose-loader',
|
||||
options: 'fluent'
|
||||
},
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [['env', { modules: false }], 'stage-3']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
include: [
|
||||
path.resolve(__dirname, 'app'),
|
||||
path.resolve(__dirname, 'common')
|
||||
]
|
||||
},
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
include: [
|
||||
// some dependencies need to get re-babeled because we
|
||||
// have different targets than their default configs
|
||||
path.resolve(__dirname, 'node_modules/testpilot-ga/src'),
|
||||
path.resolve(__dirname, 'node_modules/fluent-intl-polyfill'),
|
||||
path.resolve(__dirname, 'node_modules/intl-pluralrules')
|
||||
],
|
||||
options: regularJSOptions
|
||||
},
|
||||
{
|
||||
// Strip asserts from our deps, mainly choojs family
|
||||
include: [path.resolve(__dirname, 'node_modules')],
|
||||
loader: 'webpack-unassert-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[hash:8].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[hash:8].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'svgo-loader',
|
||||
options: {
|
||||
plugins: [
|
||||
{ removeViewBox: false }, // true causes stretched images
|
||||
{ convertStyleToAttrs: true }, // for CSP, no unsafe-eval
|
||||
{ removeTitle: true } // for smallness
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// creates style.css with all styles
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: { modules: false, importLoaders: 1 }
|
||||
},
|
||||
'postcss-loader'
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
// creates version.json for /__version__ from package.json
|
||||
test: require.resolve('./package.json'),
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: 'version.json'
|
||||
}
|
||||
},
|
||||
'extract-loader',
|
||||
'./build/package_json_loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
// creates a js script for each ftl
|
||||
test: /\.ftl$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[path][name].[hash:8].js'
|
||||
}
|
||||
},
|
||||
'extract-loader',
|
||||
'./build/fluent_loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
// creates test.js for /test
|
||||
test: require.resolve('./test/frontend/index.js'),
|
||||
use: ['babel-loader', 'val-loader']
|
||||
},
|
||||
{
|
||||
// loads all assets from assets/ for use by common/assets.js
|
||||
test: require.resolve('./build/generate_asset_map.js'),
|
||||
use: ['babel-loader', 'val-loader']
|
||||
},
|
||||
{
|
||||
// loads all the ftl from public/locales for use by common/locales.js
|
||||
test: require.resolve('./build/generate_l10n_map.js'),
|
||||
use: ['babel-loader', 'val-loader']
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new CopyPlugin([
|
||||
{
|
||||
context: 'public',
|
||||
from: '*.*'
|
||||
}
|
||||
]),
|
||||
new webpack.IgnorePlugin(/dist/), // used in common/*.js
|
||||
new webpack.IgnorePlugin(/require-from-string/), // used in common/locales.js
|
||||
new webpack.HashedModuleIdsPlugin(),
|
||||
// new webpack.optimize.CommonsChunkPlugin({
|
||||
// name: 'vendor',
|
||||
// minChunks: ({ resource }) => /node_modules/.test(resource)
|
||||
// }),
|
||||
// new webpack.optimize.CommonsChunkPlugin({
|
||||
// name: 'runtime'
|
||||
// }),
|
||||
new ExtractTextPlugin({
|
||||
filename: 'style.[contenthash:8].css'
|
||||
}),
|
||||
new ManifestPlugin() // used by server side to resolve hashed assets
|
||||
],
|
||||
devServer: {
|
||||
compress: true,
|
||||
host: '0.0.0.0',
|
||||
before: IS_DEV ? require('./server/bin/dev') : undefined,
|
||||
proxy: {
|
||||
'/api/ws': {
|
||||
target: 'ws://localhost:8081',
|
||||
ws: true,
|
||||
secure: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
const path = require('path');
|
||||
|
||||
/*
|
||||
const regularJSOptions = {
|
||||
babelrc: false,
|
||||
presets: [['env'], 'stage-2'],
|
||||
plugins: ['transform-runtime']
|
||||
};
|
||||
*/
|
||||
|
||||
const entry = {
|
||||
serviceWorker: ['./app/serviceWorker.js']
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
entry,
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
publicPath: '/'
|
||||
},
|
||||
|
||||
/*
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
options: regularJSOptions
|
||||
}
|
||||
]
|
||||
}
|
||||
*/
|
||||
};
|
||||
Loading…
Reference in New Issue