webpack是基于nodejs的打包工具,需要安装nodejs 地址 https://nodejs.org/
nodejs 如果在windows下尽量别安装在C盘,否则需要管理员权限运行。
安装完成后找到Node,js command prompt
1,全局安装 webpack
npm install -g webpack
2,找到你的项目目录 将webpack安装到你的项目
npm install --save-dev webpack
执行完成会在你的项目生成一个 node_modules 目录
3,初始化web
npm init
初始化建议输入的一些参数默认就可以,初始化以后将在你的根目录下生成一个package.json文件
4,创建配置文件 webpack.config.js
var webpack = require("webpack");
var path= require("path");
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery"
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
//new webpack.optimize.CommonsChunkPlugin('common.js')
],
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.(png|jpg)$/, loader: "url-loader?limit=50000000" },
{test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$'},
]
}
};
entry.js入口文件 用来require来写要打包的文件
bundle.js 出口文件 打包后的文件
loaders 配置要打包的类型
npm install css-loader style-loader样式loader安装
npm install url-loader图片loader安装
npm install jsx-loaderjs loader安装
npm install expose-loaderexpose loader安装
6,安装jquery
npm install jquery --save-dev
在入口文件
var $ = require("jquery");
5,执行打包命令
webpack
6 在你的页面引用你打包的js文件
webpack配置输出bundle.js
注释 未能正确找到在html中直接使用jquery的方法 请大神指教