├── .babelrc ├── .gitignore ├── README.md ├── package.json ├── postcss.config.js ├── src ├── config │ ├── base.js │ ├── dev.js │ └── prod.js ├── favicon.ico ├── index.html ├── index.js └── index.scss ├── webpack-config ├── base.js ├── dev.js └── prod.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["latest", "stage-2"], 3 | "plugins": ["transform-runtime"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | *.log 4 | npm-debug.log.* 5 | .idea 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Based on webpack2, support ES6+ and Scss 2 | 3 | ## development 4 | `npm start` 5 | 6 | ## production 7 | `npm run build` 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-demo", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "npm run dev", 6 | "build": "npm run prod", 7 | "dev": "cross-env NODE_ENV=dev webpack-dev-server --inline --hot --host 0.0.0.0", 8 | "prod": "cross-env NODE_ENV=prod webpack" 9 | }, 10 | "devDependencies": { 11 | "autoprefixer": "^6.7.2", 12 | "babel-core": "^6.22.1", 13 | "babel-loader": "^6.2.10", 14 | "babel-plugin-transform-runtime": "^6.22.0", 15 | "babel-preset-latest": "^6.22.0", 16 | "babel-preset-stage-2": "^6.22.0", 17 | "babel-runtime": "^6.22.0", 18 | "clean-webpack-plugin": "^0.1.15", 19 | "cross-env": "^3.1.4", 20 | "css-loader": "^0.26.1", 21 | "extract-text-webpack-plugin": "^2.0.0-rc.3", 22 | "file-loader": "^0.10.0", 23 | "html-loader": "^0.4.4", 24 | "html-webpack-plugin": "^2.28.0", 25 | "node-sass": "^4.5.0", 26 | "postcss-loader": "^1.2.2", 27 | "sass-loader": "^4.1.1", 28 | "style-loader": "^0.13.1", 29 | "uglifyjs-webpack-plugin": "^0.1.4", 30 | "url-loader": "^0.5.7", 31 | "webpack": "^2.2.0", 32 | "webpack-dev-server": "^2.3.0", 33 | "webpack-merge": "^2.6.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer')({browsers: ['last 2 versions', 'iOS 7', 'Firefox > 20']}) 4 | ] 5 | }; 6 | -------------------------------------------------------------------------------- /src/config/base.js: -------------------------------------------------------------------------------- 1 | export default { 2 | version: '1.0.0' 3 | } 4 | -------------------------------------------------------------------------------- /src/config/dev.js: -------------------------------------------------------------------------------- 1 | import base from './base' 2 | 3 | export default { 4 | ...base, 5 | env: 'dev' 6 | } 7 | -------------------------------------------------------------------------------- /src/config/prod.js: -------------------------------------------------------------------------------- 1 | import base from './base' 2 | 3 | export default { 4 | ...base, 5 | env: 'prod' 6 | } 7 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mlxiao93/webpack-demo/8baf922e60bc06b4908a36338bdb353f4039442b/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | webpack demo 6 | 7 | 8 |

Hello World！

9 | 10 | 11 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './index.scss' 2 | 3 | import config from 'config' 4 | 5 | console.log(config); -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | p { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | -------------------------------------------------------------------------------- /webpack-config/base.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | const path = require('path'); 3 | 4 | module.exports = { 5 | entry: process.cwd() + '/src/index.js', 6 | plugins: [ 7 | new HtmlWebpackPlugin({ 8 | filename: 'index.html', 9 | template: process.cwd() + '/src/index.html', 10 | favicon: process.cwd() + '/src/index.html' 11 | }) 12 | ], 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.js$/, 17 | exclude: [/node_modules/], 18 | loader: 'babel-loader' 19 | }, 20 | { 21 | test: /\.html$/, 22 | loader: 'html-loader', 23 | options: { 24 | minimize: true 25 | } 26 | }, 27 | { 28 | test: /\.(jpe?g|png|gif|svg)$/i, 29 | loader: 'url-loader', 30 | options: { 31 | limit: 10000, 32 | hash: 'sha512', 33 | publicPath: '/', 34 | name: 'assets/images/[hash].[ext]' 35 | } 36 | } 37 | ] 38 | }, 39 | resolve: { 40 | extensions: ['.js'], 41 | alias: { 42 | src: path.resolve(__dirname, './../src') 43 | } 44 | }, 45 | }; 46 | -------------------------------------------------------------------------------- /webpack-config/dev.js: -------------------------------------------------------------------------------- 1 | const webpackMerge = require('webpack-merge'); 2 | const base = require('./base'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const path = require('path'); 5 | 6 | module.exports = webpackMerge(base, { 7 | output: { 8 | filename: 'bundle.js' 9 | }, 10 | devtool: 'eval-source-map', //enable srouce map 11 | plugins: [], 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.scss$/, 16 | exclude: [/node_modules/], 17 | use: [ 18 | 'style-loader', 19 | { 20 | loader: 'css-loader', 21 | options: { 22 | sourceMap: true 23 | } 24 | }, 25 | 'postcss-loader', 26 | { 27 | loader: 'sass-loader', 28 | options: { 29 | sourceMap: true 30 | } 31 | } 32 | ] 33 | } 34 | ] 35 | }, 36 | resolve: { 37 | alias: { 38 | config: path.resolve(__dirname, './../src/config/dev.js') 39 | } 40 | } 41 | }); 42 | -------------------------------------------------------------------------------- /webpack-config/prod.js: -------------------------------------------------------------------------------- 1 | const webpackMerge = require('webpack-merge'); 2 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 3 | const base = require('./base'); 4 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 5 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 6 | const path = require('path'); 7 | 8 | module.exports = webpackMerge(base, { 9 | output: { 10 | filename: 'bundle.[chunkhash].js', 11 | path: process.cwd() + '/dist' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.scss$/, 17 | exclude: [/node_modules/], 18 | use: ExtractTextPlugin.extract({ 19 | fallback: 'style-loader', 20 | use: [ 21 | { 22 | loader: 'css-loader', 23 | options: { 24 | minimize: true 25 | } 26 | }, 27 | 'postcss-loader', 28 | 'sass-loader' 29 | ] 30 | }) 31 | } 32 | ] 33 | }, 34 | plugins: [ 35 | new ExtractTextPlugin({ 36 | filename: "bundle.[contenthash].css" 37 | }), 38 | new UglifyJSPlugin({ 39 | compress: { 40 | warnings: false, 41 | }, 42 | output: { 43 | comments: false 44 | } 45 | }), 46 | new CleanWebpackPlugin(['dist'], { 47 | root: process.cwd(), 48 | exclude: [] 49 | }) 50 | ], 51 | resolve: { 52 | alias: { 53 | config: path.resolve(__dirname, './../src/config/prod.js') 54 | } 55 | } 56 | }); 57 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const devModule = require('./webpack-config/dev'); 2 | const prodModule = require('./webpack-config/prod'); 3 | 4 | let finalModule = {}; 5 | 6 | let ENV = process.env.NODE_ENV; 7 | 8 | switch (ENV) { 9 | case 'dev': 10 | finalModule = devModule; 11 | break; 12 | case 'prod': 13 | finalModule = prodModule; 14 | break; 15 | default: 16 | break; 17 | } 18 | 19 | module.exports = finalModule; 20 | --------------------------------------------------------------------------------