Webpack学习

最新推荐文章于 2024-01-10 10:38:18 发布

zhanglong1229

最新推荐文章于 2024-01-10 10:38:18 发布

阅读量441

点赞数

分类专栏： js node js

本文链接：https://blog.csdn.net/zhanglong1229/article/details/53519345

版权

node js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

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,执行打包命令