use webpack file-loader to manage assets apart from js and css

master
Will Roberts 7 years ago
parent cf0e254949
commit c204f3fd17
  1. 0
      {{cookiecutter.app_name}}/assets/css/style.css
  2. 0
      {{cookiecutter.app_name}}/assets/js/main.js
  3. 0
      {{cookiecutter.app_name}}/assets/js/plugins.js
  4. 0
      {{cookiecutter.app_name}}/assets/js/script.js
  5. 16
      {{cookiecutter.app_name}}/webpack.config.js
  6. 0
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/static/build/.gitkeep

@ -13,6 +13,8 @@ const debug = (process.env.NODE_ENV !== 'prod');
// Development asset host (webpack dev server) // Development asset host (webpack dev server)
const publicHost = debug ? 'http://localhost:2992' : ''; const publicHost = debug ? 'http://localhost:2992' : '';
const rootAssetPath = './assets/';
module.exports = { module.exports = {
// configuration // configuration
context: __dirname, context: __dirname,
@ -25,8 +27,8 @@ module.exports = {
] ]
}, },
output: { output: {
path: __dirname + '/{{cookiecutter.app_name}}/static/assets', path: __dirname + '/{{cookiecutter.app_name}}/static/build',
publicPath: publicHost + '/static/assets/', publicPath: publicHost + '/static/build/',
filename: '[name].[hash].js', filename: '[name].[hash].js',
chunkFilename: '[id].[hash].js' chunkFilename: '[id].[hash].js'
}, },
@ -43,7 +45,7 @@ module.exports = {
{ test: /\.less$/, loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!less-loader' }) }, { test: /\.less$/, loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!less-loader' }) },
{ test: /\.css$/, loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader' }) }, { test: /\.css$/, loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader' }) },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }, { test: /\.(ttf|eot|svg|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?context=' + rootAssetPath + '&name=[path][name].[hash].[ext]' },
{ test: /\.(png|jpe?g|gif|ico)(\?\S*)?$/, loader: 'url-loader?limit=100000' }, { test: /\.(png|jpe?g|gif|ico)(\?\S*)?$/, loader: 'url-loader?limit=100000' },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'], cacheDirectory: true } }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'], cacheDirectory: true } },
] ]
@ -53,13 +55,9 @@ module.exports = {
new webpack.ProvidePlugin({ $: 'jquery', new webpack.ProvidePlugin({ $: 'jquery',
jQuery: 'jquery' }), jQuery: 'jquery' }),
new ManifestRevisionPlugin(__dirname + '/{{cookiecutter.app_name}}/webpack/manifest.json', { new ManifestRevisionPlugin(__dirname + '/{{cookiecutter.app_name}}/webpack/manifest.json', {
rootAssetPath: './{{cookiecutter.app_name}}/static', rootAssetPath,
ignorePaths: ['assets'] ignorePaths: ['/js', '/css']
}), }),
// add a webpack step to copy static files into place if needed
//new CopyWebpackPlugin([
// { from: '{{cookiecutter.app_name}}/static/img', to: `${__dirname}/{{cookiecutter.app_name}}/static/build/img` },
//]),
].concat(debug ? [] : [ ].concat(debug ? [] : [
// production webpack plugins go here // production webpack plugins go here
]) ])

Loading…
Cancel
Save