gistfile1.txt 先安装再说npm install webpack webpack-dev-server --save-dev最重要的就是 配置文件和使用指令 webpack.config.js 就是一个普通的 js 文件，符合 commonJS 规范。最后输出一个config对象，modul
先安装再说
npm install webpack webpack-dev-server --save-dev
最重要的就是 配置文件和使用指令
webpack.config.js 就是一个普通的 js 文件，符合 commonJS 规范。最后输出一个config对象，module.exports = config
webpack.config.js 最重要的就是 entry output loader plugin4个配置项 麻烦的就是loader和plugin这两项
简单的范例
module: {
loaders:
[
{
test: /\.js?$/, //加载非node_module中的.js
exclude: /(node_modules)/,
loader: 'babel-loader',
query: { //下面两项不就是 Babel 的配置文件是.babelrc中关键两项么，存放在项目的根目录下。一下子全在webpack.config.js中配置了
presets: ['react', 'es2015'],
plugins: ['react-html-attrs'], //添加组件的插件配置
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' }, //.css
{ test: /\.ts$/, use: 'ts-loader' },
]
}
复杂点的loader 比如要加载jquery bootstrap 文件里面就可以直接用$符号了
使用expose-loader 解决第三方库的插件依赖
你要做三步
第一 安装 node模块
npm install jquery --save
npm install bootstrap --save
第二 安装 expose-loader
npm install expose-loader --save-dev
第三 修改webpack.config.js 比如简单点的如下
module.exports = {
loaders: [{
// 得到jquery模块的绝对路径，这个jquery要跟第一步指令里面的jquery名称完全一致
test: require.resolve('jquery'),
// 将jquery绑定为window.jQuery
loader: 'expose?jQuery'
}]
};
复杂点的moudule范例
module: { //
loaders: [
{test: require.resolve("jquery"), loader: "expose?jQuery"},
{test: require.resolve("jquery"), loader: "expose?$"},
{test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css!postcss")},
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: ["babel-loader"],
query: {
presets: ["es2015"]
}
}
],
}
注意对于css的ExtractTextPlugin插件 要先安装
# for webpack 3
npm install --save-dev extract-text-webpack-plugin
# for webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1
plugins: [
new ExtractTextPlugin("[name].bundle.css", { //从你的包中提取文本（CSS）到一个单独的文件
allChunks: true
}),
new webpack.ProvidePlugin({ //就一般在使用 jQuery时候配置 这样代码中 $('#item')和jQuery('#item')都会生效
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new CleanPlugin(PATH.BUILD_PATH, { //clean-webpack-plugin用于在building之前删除你以前build过的文件
root: PATH.ROOT_PATH,
verbose: true
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
chunks: ['index']
})
]
注意：要提前安装好 npm install clean-webpack-plugin --save-dev 并且config文件开头声明 var CleanWebpackPlugin = require('clean-webpack-plugin');
同理 其他也是，我下面给出标准的完整版config文件
webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const postcssImport = require("postcss-import");
const cssnext = require("postcss-cssnext");
const PATH = require('./path');
const path = require('path');
const fs = require('fs');
const entryFiles = fs.readdirSync(PATH.ENTRY_PATH);
const files = [];
const entries = {};
entryFiles //暂时不用管
.filter(file =>
file.split('.')[0] && file.split('.').slice(-1)[0] === 'js'
)
.forEach(file => {
const filename = file.split('.')[0];
const filepath = path.join(PATH.ENTRY_PATH, file)
entries[filename] = filepath;
});
module.exports = {
entry: {
index: './src/js/index.js'
},
output: {
filename: '[name].bundle.js',
path: PATH.BUILD_PATH
},
module: { //
loaders: [
{test: require.resolve("jquery"), loader: "expose?jQuery"},
{test: require.resolve("jquery"), loader: "expose?$"},
{test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css!postcss")},
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: ["babel-loader"],
query: {
presets: ["es2015"]
}
}
],
},
resolve: { //resolve配置用来影响webpack模块解析规则 不配也行
extensions: ['', '.js', '.jsx'],
},
postcss: function() {
return [
postcssImport({addDependencyTo: webpack}),
cssnext({autoprefixer: {browsers: "ie >= 9, ..."}}) //兼容浏览器
];
},
plugins: [
new ExtractTextPlugin("[name].bundle.css", { //从你的包中提取文本（CSS）到一个单独的文件
allChunks: true
}),
new webpack.ProvidePlugin({ //就一般在使用 jQuery时候配置 这样代码中 $('#item')和jQuery('#item')都会生效
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new CleanPlugin(PATH.BUILD_PATH, { //clean-webpack-plugin用于在building之前删除你以前build过的文件
root: PATH.ROOT_PATH,
verbose: true
}),
new HtmlWebpackPlugin({ //这个配置文件还写了多入口 但是没有开启 如果是多入口 就要配置这一项 对应加入多个HtmlWebpackPlugin块
filename: 'index.html', //filename：输出的html文件名称
template: 'src/index.html', //template：模板文件路径所在位置
chunks: ['index'] //chunks：包含的文件，可以entry和其他模块chunk的模块
})
],
debug: true,
displayErrorDetails: true,
outputPathinfo: true,
devtool: "cheap-module-eval-source-map"
};
关于多入口配置项的说明:
一般咱们只生成一个index.html 但是如果想生成 多个html 就需要改改上面的配置来用了
├── package.json # 项目配置
├── src # 源码目录
│ ├── pageA.html # 入口文件a
│ ├── pageB.html # 入口文件b
│ ├── css/ # css资源
│ ├── img/ # 图片资源
│ ├── js # js&jsx资源
│ │ ├── pageA.js # a页面入口
│ │ ├── pageB.js # b页面入口
│ │ ├── lib/ # 没有存放在npm的第三方库或者下载存放到本地的基础库，如jQuery、Zepto、avalon
│ ├── pathmap.json # 手动配置某些模块的路径，可以加快webpack的编译速度
├── webpack.config.js # webpack配置入口
path.js 把路径统一放在这里配置 这个文件可以放在根目录下面 配合上面的webpack.config.js
const path = require('path');
const CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
const ROOT_PATH = path.join(__dirname); // 项目根目录
const MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
const BUILD_PATH = path.resolve(ROOT_PATH, 'build'); // 最后输出放置公共资源的目录
const SERVER_PATH = '/assets/';
const ENTRY_PATH = path.join(ROOT_PATH, './src/js'); // webpack入口文件
module.exports = {
ROOT_PATH,
BUILD_PATH,
SERVER_PATH,
CURRENT_PATH,
ENTRY_PATH
};