Webpack学习

    xiaoxiao2021-12-15  22

    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的方法 请大神指教

    转载请注明原文地址: https://ju.6miu.com/read-1000268.html

    最新回复(0)