webpack打包jsx,webpack打包js路径不对

本文目录一览：

• 1、webpack 能将html打包成js文件吗
• 2、webpack核心四要素总结
• 3、如何用webpack打包一个网站应用
• 4、webpack中是什么意思？有什么用？如何用
• 5、如何用 webpack 打包 node
• 6、webpack npm start和npm run server

webpack 能将html打包成js文件吗

load是个解析器，webpack只能加载js文件，但是开发vue是,vue文件；图片是png，jsx、json、EXE、等等这些都不是js文件；所以需要load解析器；把他们解析成js格式的文件，这样webpack就能加载处理了

webpack核心四要素总结

入口：webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。参数定义了打包后的入口文件，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。

entry: {

   app: ‘./src/main.js’

  }

出口：webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。

path: 打包文件存放的绝对路径

publicPath: 网站运行时的访问路径

filename:打包后的文件名

当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

output: {

    path: config.build.assetsRoot,

    filename: ‘[name].js’,

    publicPath: process.env.NODE_ENV ===’production’

      ? config.build.assetsPublicPath

      : config.dev.assetsPublicPath

  }

Loader：webpack 能够去处理那些非JavaScript 文件（webpack 自身只理解JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的。loaders之间是可以串联的，一个加载器的输出可以作为下一个加载器的输入，最终返回到JavaScript上。

loader：loader的名称（必须）

include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

query：为loaders提供额外的设置选项（可选）

{

        test: /\.vue$/,

        loader: ‘vue-loader’,

        options: vueLoaderConfig

      },

      {

        test: /\.js$/,

        loader: ‘babel-loader’,

        include: [resolve(‘src’),resolve(‘test’), resolve(‘node_modules/webpack-dev-server/client’)]

      }

插件：插件目的在于解决 loader 无法实现的其他事。插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

plugins: [

    new webpack.DefinePlugin({

      ‘process.env’:require(‘../config/dev.env’)

    }),

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(), // HMRshows correct file names in console on update.

    new webpack.NoEmitOnErrorsPlugin(),

    //

    new HtmlWebpackPlugin({

      filename: ‘index.html’,

      template: ‘index.html’,

      inject: true

    }),

    // copy custom static assets

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname,’../static’),

        to: config.dev.assetsSubDirectory,

        ignore: [‘.*’]

      }

    ])

  ]

如何用webpack打包一个网站应用

随着前端技术的发展，越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现，让我们了解了解用起来吧！今天我来介绍一下如何用webpack打包一个网页应用。

一般我们写页面，大概都是这样的结构：

index.html

css

style.css

js

index.js

………..

这样我们的html里直接引用css和js，完成一个网页应用。用webpack也类似，只是webpack把图片、css和js都编译打包成一个文件，我们只需要引用一个文件就可以了。

1.我们需要先安装node环境。没安装的请自行安装

2.在项目目录下输入npm init初始化一个node项目，输入项目名称等信息，完成后生成一个package.json文件。

3.在项目目录下安装webpack

npm install –save-dev webpack

4.我们需要一个webpack.config.js文件，记录webpack配置信息。它的配置大概这样：

var webpack = require(‘webpack’);

var path = require(‘path’);

var buildPath = path.resolve(__dirname, ‘build’);

var config = {

//入口文件

entry: {

index : ‘./src/js/index.js’

},

extensions: [”, ‘.js’, ‘.json’, ‘.css’, ‘.less’],

output: {

path: buildPath, //编译后的文件路径

filename: ‘app.js’

},

module: {

//Loaders

loaders: [

//.css 文件使用 style-loader 和 css-loader 来处理

{ test: /\.css$/, loader: ‘style-loader!css-loader’ },

{ test: /\.less$/,

loader: ‘style-loader!css-loader!less-loader’

},

//.js 文件使用 babel 来编译处理

{ test: /\.js$/, loader: ‘babel’ },

//图片文件使用 url-loader 来处理，小于8kb的直接转为base64

{ test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’}

]

},

};

module.exports = config;

我们需要指定编译的入口文件和输出的目录路径，以及css和js用什么loader处理，比如我使用了less，要编译less文件，就指定less-loader，js我要用es6来写，为了兼容性，用babel来转成es5的代码。如果要使用react，也可以指定jsx等的编译方式。

5.这些loader都是需要npm安装的

npm install –save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015

6.如果需要用babel，在项目目录下新建一个名为.babelrc的隐藏文件，里面这样写：

{“presets”:[“es2015”]}

保存。

7.根据配置可以看到我们需要一个src文件夹和一个build文件夹，src放图片、css和js的源代码，build作为输出文件夹放编译后的文件。

8.src/js/index.js文件作为我们的入口文件，我们在里面可以愉快地写es6的代码，比如：

‘use strict’;

require(‘../css/base.css’);

require(‘../css/animate.css’);

require(‘../css/style.less’);

require(‘../js/zepto.min.js’);

let a = ‘world’;

let hello = `hello ${a}`;

console.log(hello);

可以看到css我们都通过require的方式引进来，这样webpack会把css和js打包进一个文件。

9.我们还差个index.html，放在项目文件夹下就可以，正常写，引入build/app.js就可以啦！

10.让我们试试吧

webpack中是什么意思？有什么用？如何用

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

如何用 webpack 打包 node

按照通常的做法, package.json中的dependencies都是会被项目require的依赖, devDependencies都是和环境相关的依赖, 如果自己也是这样的话(或者也可以改成这样), 那么只需要:

var json = require(‘./package.json’) // 这个路径视当前的路径进行对于修改

module.exports = {

entry: {

app: path.resolve(__dirname, ‘app/index.jsx’),

// 将 第三方依赖 单独打包

vendor: Object.keys(json.dependencies)

},

output: {

path: __dirname + “/build”,

filename: “[name].[chunkhash:8].js”,

publicPath: ‘/’

},

// …省略若干行…

plugins: [

// …省略若干行…

new webpack.optimize.CommonsChunkPlugin({

name: ‘vendor’,

filename: ‘[name].[chunkhash:8].js’

})

]

}

webpack npm start和npm run server

最近开始学习webpack，webpack可以看做是模块打包机，分析项目结构，找到JavaScript模块和一些浏览器不能直接运行的语言，类似Scss,JSX,Typescript等，并将其转换和打包为合适的格式供浏览器使用。

没有比较性

Gulp/Grunt是一种能够优化前端的开发流程的自动化工具，webpack是模块化的解决方案，本质上就不是一样，而且在很多时候，webpack可以替代前面两者的工作

webpack是webpack自带的一条打包命令，是最基本的打包命令。

npm run webpack，则是在package.json文件中有一个script配置项，在这个script里面自定义的一条命令，它通过npm来运行。例如：

当脚本名为“start”时，可以省略“run”，直接为：

npm run server等也类似