У меня есть файл index.js, который понимает es6. Если я создам другой файл js файла в той же папке и создаю несколько es6, я получаю некоторые ошибки. Кажется, мой index.js - единственный, который получает эффекты моего загрузчика бабелей. вот мой webpack.config.js У меня не будет возможности импортировать экспорт из разных js файлов, но я не уверен, что случилось
Конфигурация Webpack:
'use strict';
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
let FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const NODE_ENV = process.env.NODE_ENV;
const buildingForLocal = () => {
return (NODE_ENV === 'development');
};
const config = {
mode: buildingForLocal() ? 'development' : 'production',
context: path.resolve(__dirname, 'src'),
entry: {
main: './assets/js/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'assets/js/[name].js'
},
optimization: {
splitChunks: {
chunks: 'all'
},
},
resolve: {
extensions: ['.js'],
modules: [
"node_modules"
]
},
devServer: {
quiet: true
},
devtool: buildingForLocal() ? 'cheap-module-eval-source-map' : undefined,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true
}
}
},
{
test: /\.pug$/,
loaders: 'pug-loader',
// Add this option to disable minification when building
query: {
pretty: true
}
},
{
test: /\.(scss|css)/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
url: true,
sourceMap: true,
minimize: true
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
// Generate vendor prefixes
require('autoprefixer')({
'browsers': ['> 1%', 'last 2 versions']
})
]
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
]
})
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
limit: 40000,
name: '[name].[ext]',
outputPath : 'assets/images/',
publicPath : function(path){
return '../images/' + path;
}
}
}
]
},
{
test: /\.(ttf|otf|eot|woff|woff2|svg)$/,
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath : 'assets/fonts/',
publicPath : function(path){
return '../fonts/' + path;
}
}
}
]
},
plugins: [
new FriendlyErrorsWebpackPlugin(),
new FaviconsWebpackPlugin({
logo: './assets/images/morty.png',
persistentCache: true,
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: false,
favicons: true,
firefox: true,
opengraph: false,
twitter: false,
yandex: false,
windows: true
}
}),
new ExtractTextPlugin('./assets/css/style.css'),
new CopyWebpackPlugin([
{
from:'./assets/images',
to:'./assets/images',
ignore: ['.*']
}
]),
new CopyWebpackPlugin([
{
from:'./assets/fonts',
to:'./assets/fonts',
ignore: ['.*']
}
]),
new HtmlWebPackPlugin({
template: "./pug/index.pug",
filename: "index.html",
inject: true,
chunksSortMode: 'dependency'
}),
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:8080/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
if (NODE_ENV === 'production') {
module.exports.devtool = 'source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
])
config.optimization.minimizer = [
new UglifyJsPlugin({
cache: true,
parallel: true,
})
]
}
module.exports = config;
package.json
{
"name": "ts",
"version": "1.0.0",
"description": "This is a simple webpack 4 setup to build simple
static sites",
"main": "index.js",
"scripts": {
"clean": "rimraf dist",
"dev": "webpack-dev-server --progress --hide-modules --mode
development",
"build": "npm run clean && webpack --hide-modules --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"browser-sync": "^2.24.5",
"browser-sync-webpack-plugin": "^2.2.2",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"favicons-webpack-plugin": "0.0.9",
"file-loader": "^1.1.11",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"imagemin-webpack-plugin": "^2.1.5",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"rimraf": "^2.6.2",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.14.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}
}
Добавьте точку входа для каждого файла, которая не является зависимой. Например. если one.js импортирует two.js, тогда вам нужна только одна запись, то есть one.js, но если вам нужно использовать two.js отдельно, вам нужно определить новую точку входа.
{...,
entry: {
main: './assets/js/one.js',
two: './assets/js/two.js'
},
...}