webpack

var path = require('path')
var uglify = require('uglifyjs-webpack-plugin')
var htmlPlugin = require('html-webpack-plugin')
var extractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
	mode: 'development',
	entry: {
		main: './src/main.js'
	},
	output: {
		path: path.resolve(__dirname, '../dist'),
		filename: '[name].js',
		publicPath: '/'
	},
	plugins: [
		new uglify(),
		new htmlPlugin({		
			hash:true,
			template:'./src/index.html' 
		}),
		new extractTextPlugin('css/style.css')
	],
	devServer: {
		contentBase: path.resolve(__dirname, '../dist'),
		host: 'localhost',
		compress: true,
		port: 10086
	},
	module: {
		rules: [
			{
				test:/\.(png|jpg|gif|jpeg)/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit: 500,
                        outputPath: 'imgs/'
                    }
                }]
			},
			{
				test:/\.css$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'                  
                })
			},
			{
				test: /\.less$/,
				use: extractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader'
                    }, {
                        loader: 'less-loader'
                    }],
                    fallback: 'style-loader'
                })
            }
		]
	}
}

 

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config=config/webpack.dev.js",
    "build": "rimraf dist && mkdirp dist && cross-env NODE_ENV=production && webpack --progress --config=config/webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mkdirp": "^0.5.1",
    "ncp": "^2.0.0",
    "rimraf": "^2.6.2",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
  },
  "dependencies": {}
}

 

你可能感兴趣的:(webpack)