webpack2 resolve 问题Can't resolve webpack2 resolve/hot/dev-server'怎么解决

来源：蜘蛛抓取(WebSpider) 时间：2017-08-06 10:39 标签： webpack2 resolve
Access denied |
used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website () has banned your access based on your browser's signature (38a173bbd60420ae-ua98).23:43 提问
配置webpack.config.js时出现错误，提示如下所示
是怎么回事？我的代码如下所示：
var path=require('path');
var webpack=require('webpack');
var HtmlWebpackPlugin=require('html-webpack-plugin');
//一些常用路径
var ROOT_PATH=path.resolve(__dirname);
var APP_PATH=path.resolve(ROOT_PATH,'app');
var BUILD_PATH=path.resolve(ROOT_PATH,'build');
console.log("ROOT_PATH====="+ROOT_PATH);
console.log("APP_PATH====="+APP_PATH);
console.log("BUILD_PATH====="+BUILD_PATH);
module.exports={
app:path.resolve(APP_PATH,'index.jsx')
path:BUILD_PATH,
filename:'bundle.js'
//开启 dev source map
devtool:'eval-source-map',
//开启 webpack dev server
devServer:{
historyApiFallback:true,
inline:true,
progress:true
//配置preLoaders,将eslint添加进入
// preLoaders: [
test:/.jsx?$/,
loaders:['eslint'],
include:APP_PATH
//配置loaders,将babel添加进去
test:/.jsx?$/,
loaders:['babel'],
include:APP_PATH
//配置plugin
new HtmlWebpackPlugin({
title:'My first react app'
extensions:['','.js','.jsx']
extensions:['','.js','.jsx']
这段代码之后，结果变为下面：
按赞数排序
webpack@2.2.0-rc.3 has breaking changes. preLoaders is removed from the webpack^2.1.0-beta.23. so move it to rules and use enforce: "pre" instead.
module.exports = {
// entry, output, other top-level options ...
test: /.js$/,
exclude: /node_modules/,
enforce: 'pre',
use: [{loader: 'eslint-loader', options: {rules: {semi: 0}}}],
// other rules
// no need for plugins
执行webpack是就报错了---
extensions:['','.js','.jsx']
解决了，我是用的是以前版本的webpack,在webpack.config.js中的配置与现在是有区别的，现在使用最新版本的已经去掉了preLoaders属性，使用rules进行代替操作
其他相似问题webpack中开发工具webpack-dev-server和常用loaders加载器的简单使用
webpack中开发工具webpack-dev-server和常用loaders加载器的简单使用。
webpack-dev-server
webpack-dev-server 在webpack 官网上的 develop tools 获取，用于监听文件变化，实现时时打包，时时刷新功能。
作为项目依赖安装：
$ npm i --save-dev webpack-dev-server
依照上篇博客修改package.json文件中的scripts
&develop&: &webpack-dev-server --config webpack.develop.config.js --devtool eval --progress --colors --hot --content-base src&
$ npm run develop
将会在src目录下搭建一个web服务器， 访问 ： http://localhost:8080 就会看到效果。
webpack supports pre-processing files via loaders. This allows you to bundle any static resource not only javascript. You can easily write your own loaders running in Node.js.
webpack 通过加载器支持预处理文件，这会让你打包不止于js的任何静态文件。你可以在nodejs环境中写自己的加载器。
通过安装几个加载器来举例说明：
babel-loader
$ npm i --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react
安装完上述几个插件后就可以转换jsx和ES6的语法了。
修改webpack配置文件中的 module, 下面loaders 是个数组，表示不同的加载器
loaders: [
test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
loader: 'babel',// 加载模块 &babel& 是 &babel-loader& 的缩写
presets: ['es2015', 'react']
sass-loader
用于处理sass文件
$npm i --save-dev sass-loader
将sass处理器添加入loaders中
test:/\.scss$/,
loader:'style!css!sass'
url-loader
用于处理图片的引用关系，大图片直接引用，小图片会转成base64文件
$ npm i --save-dev url-loader
将url-loader加入loaders中
test:/\(png|jpg|jpeg)$/,
loader:'url?limit=10000&name=images/[name].[ext]'
说明： limit代表以字节为单位的图片在10000字节的时候会打包到bundle.js中，超出会进行图片地址的引用。name参数代表将打包的文件放入哪个文件夹下。
file-loader
具体用法在这里： github-file-loader 多用于移动文件使用
$ npm i --save-dev file-loader
将file-loader加入loaders中, 具体用法还需尝试官方文档所示。
test:/\.(png|gif|jpg|jpeg)$/,
loader:'file-loader?name=images/[name].[ext]'

我要回帖

更多关于 webpack2 resolve 的文章

 

随机推荐