Skip to content

[065] Update to webpack 2 #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 25, 2017
Merged

[065] Update to webpack 2 #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e4c3d9c
065 update to webpack 2
mikeerickson Jan 24, 2017
10bdc17
Merge branch 'master' into 065-update-to-webpack2
mikeerickson Jan 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2015-2016 Preboot team
Copyright (c) 2015-2017 Preboot team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

A complete, yet simple, starter for Angular using Webpack.

This workflow serves as a starting point for building Angular 1.x applications using Webpack. Should be noted that apart from the pre-installed angular package, this workflow is pretty much generic.
This workflow serves as a starting point for building Angular 1.x applications using Webpack 2.x. Should be noted that apart from the pre-installed angular package, this workflow is pretty much generic.

* Heavily commented webpack configuration with reasonable defaults.
* ES6, and ES7 support with babel.
Expand Down
18 changes: 9 additions & 9 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-webpack-workflow",
"version": "1.0.0",
"version": "1.1.0",
"description": "A workflow for Angular made with Webpack",
"scripts": {
"build": "rimraf dist && webpack --bail --progress --profile",
Expand Down Expand Up @@ -28,9 +28,9 @@
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.23.0",
"extract-text-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.7.1",
"istanbul-instrumenter-loader": "^1.0.0",
Expand All @@ -41,15 +41,15 @@
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^1.7.0",
"node-libs-browser": "^2.0.0",
"karma-webpack": "2.0.1",
"node-libs-browser": "2.0.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.4",
"postcss-loader": "^1.1.1",
"postcss-loader": "1.2.2",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.1",
"style-loader": "^0.13.0",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
"webpack": "2.2.0",
"webpack-dev-server": "2.2.0"
}
}
7 changes: 7 additions & 0 deletions postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
plugins: {
autoprefixer: {
browsers: ['last 2 versions']
},
},
};
49 changes: 32 additions & 17 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';

module.exports = function makeWebpackConfig () {
module.exports = function makeWebpackConfig() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
Expand Down Expand Up @@ -63,9 +63,11 @@ module.exports = function makeWebpackConfig () {
*/
if (isTest) {
config.devtool = 'inline-source-map';
} else if (isProd) {
}
else if (isProd) {
config.devtool = 'source-map';
} else {
}
else {
config.devtool = 'eval-source-map';
}

Expand All @@ -78,14 +80,13 @@ module.exports = function makeWebpackConfig () {

// Initialize module
config.module = {
preLoaders: [],
loaders: [{
rules: [{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.js$/,
loader: 'babel',
loader: 'babel-loader',
exclude: /node_modules/
}, {
// CSS LOADER
Expand All @@ -100,7 +101,14 @@ module.exports = function makeWebpackConfig () {
//
// Reference: https://github.com/webpack/style-loader
// Use style-loader in development.
loader: isTest ? 'null' : ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader')

loader: isTest ? 'null' : ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{loader: 'css-loader', query: {sourceMap: true}},
{loader: 'postcss-loader'}
],
})
}, {
// ASSET LOADER
// Reference: https://github.com/webpack/file-loader
Expand All @@ -109,13 +117,13 @@ module.exports = function makeWebpackConfig () {
// Pass along the updated reference to your code
// You can add here any file extension you want to get copied to your output
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file'
loader: 'file-loader'
}, {
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'raw'
loader: 'raw-loader'
}]
};

Expand All @@ -124,7 +132,8 @@ module.exports = function makeWebpackConfig () {
// Instrument JS files with istanbul-lib-instrument for subsequent code coverage reporting
// Skips node_modules and files that end with .test
if (isTest) {
config.module.preLoaders.push({
config.module.rules.push({
enforce: 'pre',
test: /\.js$/,
exclude: [
/node_modules/,
Expand All @@ -142,18 +151,24 @@ module.exports = function makeWebpackConfig () {
* Reference: https://github.com/postcss/autoprefixer-core
* Add vendor prefixes to your css
*/
config.postcss = [
autoprefixer({
browsers: ['last 2 version']
})
];
// NOTE: This is now handled in the `postcss.config.js`
// webpack2 has some issues, making the config file necessary
Copy link
Member

@Foxandxss Foxandxss Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

explain please

Copy link
Contributor Author

@mikeerickson mikeerickson Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will find the reasoning behind this and send it to you. I applied this fix personally sometime ago (when working with webpack beta release) and have not revistited

Copy link
Contributor Author

@mikeerickson mikeerickson Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First and formost, webpack 2 does not allow "custom" config properties (can only use webpack native properties).

So, the postcss.config.js replaces the use of

...
   config.postcss()
...

Copy link
Member

@Foxandxss Foxandxss Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I ask is why an external file, I prefer everything contained.

Copy link
Contributor Author

@mikeerickson mikeerickson Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like I mentioned above, I will track down where the information I gleaned as to requiring the postcss.config.js I understand what you are asking, but I am just stating that I dont recall where I say this (when I had to add it to my project).

Further, adding the postcss.config.js is the usage of .babelrc (it too could be stored in the package.json

I will track down where I found the information about needing to use postcss.config.js with webpack 2

Copy link
Contributor Author

@mikeerickson mikeerickson Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Foxandxss I believe this is where i got my information (near bottom of thread, stating postcss.config.js is required when using postcss plugins)

webpack/postcss-loader#125

image

Copy link
Member

@Foxandxss Foxandxss Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am good with that. Can you resolve the conflict tho?

Copy link
Contributor Author

@mikeerickson mikeerickson Jan 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing...


/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [];
config.plugins = [
new webpack.LoaderOptionsPlugin({
test: /\.scss$/i,
options: {
postcss: {
plugins: [autoprefixer]
}
}
})
];

// Skip rendering index.html in test mode
if (!isTest) {
Expand All @@ -168,7 +183,7 @@ module.exports = function makeWebpackConfig () {
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files
// Disabled when in test mode or not in build mode
new ExtractTextPlugin('[name].[hash].css', {disable: !isProd})
new ExtractTextPlugin({filename: 'css/[name].css', disable: !isProd, allChunks: true})
)
}

Expand Down