2回答

幕布斯2405234

提问者

2017-10-23

css文件：body{
   background: red;
}

webpack.config.js文件：

//webpack 2.0以上要先引入path
var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 环境变量配置，dev / online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

// 获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
   return {
       template    : './src/view/' + name + '.html',
       filename    : 'view/' + name + '.html',
       inject      : true,
       hash        : true,
       chunks      : ['common', name]
   };
};


var config = {
   entry: {
       'index': ['./src/page/index/index.js'],
       'login': ['./src/page/login/index.js'],
       'common':['./src/page/common/common.js']
   },
   output: {
       path: path.resolve(__dirname, './dist'),
       publicPath:'/dist/',
       filename: 'js/[name].js'
   },
   externals:{
       'jquery':'window.jQuery'
   },
   module:{
       loaders:[
           { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader') },
           { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' },
       ]
   },
   plugins:[
       //独立通用模块
       new webpack.optimize.CommonsChunkPlugin({
           name :'common',
           filename:'js/base.js'
       }),
       //把css打包到独立文件
       new ExtractTextPlugin("css/[name].css"),
       //html模版的处理，没有参数默认生成在dist目录
       new HtmlWebpackPlugin(getHtmlConfig('index'))
   ]
};


if('dev' === WEBPACK_ENV){
   config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

module.exports = config;

index.js文件：

'use strict';

var $$ = require('jquery');

//这里的./必须有
require('./index.css');

// $$('body').html("HELLO");
console.log('i am index');

package.json文件：

{
 "name": "src",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "start": "webpack-dev-server",
   "dev": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
   "dist": "set WEBPACK_ENV=online && webpack -p"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "css-loader": "^0.28.7",
   "extract-text-webpack-plugin": "^3.0.1",
   "html-loader": "^0.5.1",
   "html-webpack-plugin": "^2.30.1",
   "style-loader": "^0.17.0",
   "url-loader": "^0.6.2",
   "webpack": "^3.7.1",
   "webpack-dev-server": "^2.9.3"
 },
 "dependencies": {}
}

0

0

Rosen

2017-10-23

把代码发给我吧，从这看不出来

0

3

Rosen

回复

幕布斯2405234

这两个插件是有顺序的，style的结果再交给css-loader处理

2017-10-24

共3条回复